列表项中间垂直对齐

Question

我有以下创建列表的 HTML 和 CSS，其中列表项设置了最小高度。如果没有足够的内容来填充整个高度，我希望列表项的内容在中间而不是顶部垂直对齐。我该怎么办？

<html>
    <head>
        <style type="text/css">
            ul {
                width : 300px;
                list-style-type: none;
            }

            li {
                min-height : 45px;
                vertical-align : middle;
                border-bottom : 1px black solid;
            }
        </style>
    <head>
    <body>
        <ul>    
            <li>Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
       </ul>
 </body>

这给了我以下信息：

Answer 1

啊，好啊vertical align。最简单的方法是设置line-height: 45px;，但这仅在您有一行内容时有效，并且会强制任何其他行溢出。

否则，您可以使用display:table-cell; vertical-align: middle;，如上述链接所示。

Answer 2

如果您在<li> 内添加<div> 并对CSS 进行以下更改，它似乎可以工作：

li {
    min-height : 45px;
    border-bottom : 1px black solid;
}
li div {
    height:45px;
    display:table-cell;
    vertical-align : middle;
}

在这里现场观看——在 IE8 和 FF4 中工作：http://jsfiddle.net/RrVBh/