목록 항목에 div 가운데 맞추기

Question

나는 목록 항목 안에 div가 있고 목록 항목에 div를 가운데 놓으려고하는 HTML 페이지가 있습니다. div의 너비는 목록 항목의 너비보다 작습니다. 내 CSS는

같은

ul.my { 
    width: 100px; 
    padding: 0; 
} 

li.my { 
    list-style: none; 
} 

div.content { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
} 

보이는 그리고 HTML은

<li class="my"><div class="content">stuff</div></li> 

처럼 보이는 조각을 가지고 있지만 사업부는 왼쪽 정렬됩니다. 올바르게 정렬하려면 어떻게해야합니까?

Answer 1

당신은 어느 수평 중심

div.content { 
    width: 100%; 
    text-align: center; 
} 

또는 중앙 사업부 자체 사업부의 내용을 수 있습니다 수직 중심 들어

.my li { 
    text-align: center; 
} 
div.content { 
    display: inline-block; 
} 

, 당신의 display: table-cell 요소를 포장해야합니다 a display:table 하나,

.my li { 
    height: 200px; 
    display: table; 
} 
div.content { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 2

CSS와 HTML이 실제로 관련되어 있습니까?

당신의 .my 클래스는 li 요소에, 그래서 당신의 스타일은 다음과 같은 모양입니다 :

li.my { 
    // li styles 
} 

하고 주위에 더 큰 용기를 가지고하지 않는 한 ul 다음 .my ul 중 하나를 여기에 적용되지 않습니다. 이러한 변경 사항을 제외하고

, 하나를 사용 li { text-align: center; } 또는 div { margin: auto; }

UPDATE (수직 중심) : 수직 중심 들어

, 텍스트는 모두 한 줄에 다음 line-height 같은 크기로 설정하려고 할 경우 처럼 font-size, 같이

div.content { 
    font-size: 14px; 
    line-height: 14px; 
} 

그것은 2 개 이상의 라인에 래핑 경우 조금 복잡합니다. Try this.