Html 列表项中间垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6219253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
List Items Middle Vertically Aligned
提问by Steve
I have the following HTML and CSS that creates a list, where the list items have a min-height set. I would like for the contents of the list items to be vertically aligned in the middle instead of the top if there is not enough content to fill the entire height. How the heck do I pull this off?
我有以下 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>
Which gives me the following:
这给了我以下内容：
回答by dragfyre
If you add a <div>inside the <li>and make the following changes to the CSS, it seems to work:
如果你在<div>里面添加一个<li>并对 CSS 进行以下更改，它似乎可以工作：
li {
min-height : 45px;
border-bottom : 1px black solid;
}
li div {
height:45px;
display:table-cell;
vertical-align : middle;
}
See it live here-- works in IE8 and FF4: http://jsfiddle.net/RrVBh/
在这里看到它——适用于 IE8 和 FF4：http: //jsfiddle.net/RrVBh/
回答by scurker
Ahh, good ol' vertical align. The easiest way is to set line-height: 45px;but this only works when you have one line of content and will force any additional lines to overflow.
啊，很好的垂直对齐。最简单的方法是设置，line-height: 45px;但这仅在您有一行内容时才有效，并且会强制任何其他行溢出。
Otherwise, you could use display:table-cell; vertical-align: middle;as demonstrated in the above link.
否则，您可以display:table-cell; vertical-align: middle;按照上述链接中的说明使用。
