複数のテキストをリスト内で縦に並べるにはどうすればよいですか？

Question

例：jsfiddle.net/h5sE6/

CSS：

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

HTML：これは、あなたが1行を持っている場合、テキストを垂直方向に揃えると、行の高さに等しい高さを作ると簡単です

<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です。

これは、2つのインラインブロック要素が互いに垂直に配置されるために機能します。 :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/