垂直對齊li元素中的混合元素

Question

長時間讀者，首次發帖:)對此有什麼好主意？ ：

我有4個<li>元素顯示爲內嵌塊。

這些元素都包含元素的混合。 3包含<h3>和<div>。 1包含<q>，<strong>和<a>。

我的問題：我如何垂直對齊這些元素的文本，而不對文本內容進行任何限制，或者事先不知道文本的數量？隨着文本長度的增加，當我希望它們保持在頂部時，較短的列將隨着<ul>的底部而下降！

代碼和結果可以看這裏： http://jsfiddle.net/m6HG5/5/

謝謝！

Answer 1

假設我正確理解你的問題，你需要指定UL元素的line-height：

<ul> 
    <li><h3>List Item 1</h3></li> 
    <li><strong>List Item 2</strong></li> 
    <li><a href="#">List Item 3</a></li> 
</ul> 

而且造型：

ul { 
     line-height:1em; 
    } 

li { 
    float:left; 
    vertical-align:middle; 
    padding:5px; 
    display:block; 
} 

h3 { 
    font-size:1.5em; 
} 

strong { 
    font-weight:bold;} 

http://jsfiddle.net/m6HG5/3/