CSS 센터의 목록에있는 항목 목록

Question

첫째로 내 CSS 기술은 ... 진행 중입니다. 그러나 나는 그리드에 배열 된 목록 항목들을 성공적으로 가질 수있는만큼 멀리까지 도달했다. http://jsfiddle.net/ashanova/Y4SR3/2/

내가 지금하고 싶은 것은 목록 항목을 집중시키는 것이다. float을 inline으로 대체하려고했지만 각 항목의 width 및 height이 무너졌습니다. 또한 각 목록 항목 내에 텍스트를 가로 및 세로 가운데에 배치하고 이상적으로 줄임표가 아닌 텍스트를 겹쳐서 표시하는 것이 좋습니다. 마지막 사양으로 CSS가 가능하면 ul 및 그 자식으로 만 수정하고 싶습니다.

Answer 1

을하고, 2 축에 센터링 (/ 중음)을 사용하면 다른 답변이 원하는 것이 아니라면 실제로는 display: table-cell을 원할 수도 있습니다.

체크 this fiddle. 당신이 당신의 li 요소 display: table-cell, text-align: center 및 vertical-align: middle을주는 경우에

, 나는 텍스트가 적절하게 자신을 드릴 것입니다 생각합니다. 안타깝게도 table-cell 요소는 여백을 허용하지 않으므로 대신 10px 테두리를 추가했습니다.

오버플로되는 텍스트의 잘림 및 타원 삽입을 수행하려면 일종의 자바 스크립트를 사용해야합니다. 당신이해야 할 일은 http://jsfiddle.net/crowjonah/jx8sD/

은 다음과 같습니다

UPDATE

당신이 많은 다른 답변과 의견을 통해 계신에 대한 자세한 내용을 배운, 나는 여기에 더 나은 솔루션을 함께 왔어요 이 CSS를 li 요소 내부 <a class="list-item"> 태그를 삽입하고, 사용

.tile li { 
    background-color: white; 
    display: block; 
    float: left; 
    margin: 10px; 
    overflow: hidden; 
} 
.tile li a.list-item{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 75px; 
    text-align: center; 
    width:75px; 

} 

Answer 2

Text-align: center은 목록 항목을 가운데 정렬합니다. Vertical-align: text-top은 항목을 가운데로 세로로 정렬합니다.

Answer 3

vetical-align이 경우 실제로 작업을 수행하지 않습니다. 나는 그것이 그렇게 단순했으면 좋겠다.

이 aricle 문제로 몇 가지 통찰력을 줄 것이다 당신이 그것을 해결하는 데 도움이 될 것입니다 : 여러 부모와 자식 요소를 처리 할 때 언어가 조금 불분명 얻을 수 있지만

Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 4

이 당신이 원하는 것을 할 것입니다. 인라인 블록 항목의 테두리는 아프므로 테두리가 올바르게 보이도록 사용하고 있습니다.

.tile li { 
    background-color: white; 
    display:inline-block; 
    border: 10px solid red; 
    width: 75px; 
    height: 75px; 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
    overflow: hidden; 
}