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>

这给了我以下内容：

enter image description here

Answer 1

如果您在<div>中添加<li>并对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/

Answer 2

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

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

列表项中间垂直对齐

2 个答案: