Come allineare verticalmente il testo multilinea all'interno di un elenco?

Question

Esempio: 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> 

Questo è banale con l'allineamento verticale del testo e rendendo l'altezza pari alla line-height se si dispone di una linea solo ma più di questo, le cose sembrano davvero vaghe.

Answer 1

Puoi farlo con un aiuto :before elemento e con l'aggiunta di un nidificato <span>:

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

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

Ecco a demo di esso in azione.

Questo funziona perché due elementi di blocco in linea si allineano verticalmente l'uno con l'altro. La regola :before crea un elemento di blocco in linea avente la stessa altezza del relativo elemento principale, al quale è possibile allineare verticalmente l'altezza variabile <span>.

Per una spiegazione completa di come funziona, see this answer sull'allineamento verticale delle immagini.

Answer 2

Si può fare questo con l'aggiunta di un span al markup e quindi utilizzando display:table etc nel css:

<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; 
} 

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