在li元素內垂直對齊混合元素

Question

長期的讀者，第一時間的帖子:)有什么好主意嗎？ ：

我有4個<li>元素顯示為行內塊。

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

我的問題：如何垂直對齊這些元素的文本，而又不對其中的文本量施加任何限制，或者不事先知道其中的文本量？ 隨着文本長度的增加，較短的列會在<ul>的底部下降，而我希望它們保留在頂部！

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

謝謝！

Answer 1

假設我正確理解了您的問題，則需要指定UL元素的行高：

<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/