목록에서 여러 줄 텍스트를 어떻게 세로로 정렬 할 수 있습니까?

Question

예 : jsfiddle.net/h5sE6/

CSS :

ul { 
    float: left; 
    margin-right:20px; 
} 
ul li { 
    height: 3em; 
    border: 1px solid #ff0000; 
    width:200px; 
} 

HTML :이 한 줄이있는 경우 텍스트를 세로로 정렬하고 라인의 높이와 동일한 높이를 만들기에 사소한

<ul> 
    <li> Some text</li> 
    <li>Some text<br />some more text</li> 
    <li>some test text3</li> 
    <li>even more text<br />and more</li> 
</ul> 
<ul> 
    <li> Some text</li> 
    <li>Some text<br />some more text</li> 
    <li>some test text</li> 
    <li>even more text<br />and more</li> 
</ul> 

만 그러나 그것보다 더 많은 것들은 정말로 엉망으로 보입니다.

Answer 1

도우미와 함께 할 수 있습니다. :before 요소와 중첩 <span>를 추가하여 :

ul li span { 
    display: inline-block; 
    vertical-align: middle;  
} 

ul li:before{ 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%;  
} 

가 여기에 행동에 그것의 a demo을합니다.

두 개의 인라인 블록 요소가 서로 수직으로 정렬되기 때문에 작동합니다. :before 규칙은 가변 높이가 <span>과 수직으로 정렬 될 수있는 부모와 동일한 높이 인 인라인 블록 요소를 만듭니다.

어떻게 작동하는지에 대한 전체 설명은 see this answer에서 이미지를 세로로 정렬하는 방법에 대해 설명합니다.

Answer 2

당신은 당신의 마크 업에 span를 추가 한 다음 CSS에서 display:table 등을 사용하여이 작업을 수행 할 수 있습니다 :

<ul> 
    <li><span>Some text</span></li> 
    <li><span>Some text<br />some more text</span></li> 
    <li><span>some test text</span></li> 
    <li><span>even more text<br />and more</span></li> 
</ul> 

CSS

ul { 
    display: table; 
    border-collapse: collapse; 
    width: 100%; 
} 

ul li { 
    height: 3em; 
    border: 1px solid #ff0000; 
    display: table-row; 
} 

ul li span{ 
    display:table-cell; 
    vertical-align: middle; 
} 

예 :http://jsfiddle.net/jasongennaro/nePt6/