列表项垂直居中对齐
我有以下 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>
这给了我以下内容：
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>
<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:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您在
内添加一个并对 CSS 进行以下更改，它似乎可以工作：在这里查看它 - 适用于IE8 和 FF4：http://jsfiddle.net/RrVBh/
If you add a
<div>inside the<li>and make the following changes to the CSS, it seems to work:See it live here-- works in IE8 and FF4: http://jsfiddle.net/RrVBh/
啊，很好的垂直对齐。最简单的方法是设置
line-height: 45px;但这仅在只有一行内容时有效，并且会强制任何其他行溢出。否则，您可以使用
display:table-cell; Vertical-align: middle;如上面的链接所示。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.Otherwise, you could use
display:table-cell; vertical-align: middle;as demonstrated in the above link.