列表项中间垂直对齐
[英]List Items Middle Vertically Aligned
问题描述
I have the following HTML and CSS that creates a list, where the list items have a min-height set.
我有以下 HTML 和 CSS 创建一个列表，其中列表项具有最小高度集。 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:这给了我以下信息：
2 个解决方案
解决方案1
22 已采纳 2011-06-02 19:42:27
If you add a <div> inside the <li> and make the following changes to the CSS, it seems to work:如果在<li>中添加<div>并对 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/
解决方案2
4 2011-06-02 19:22:33
Ahh, good ol' vertical align .啊，很好的垂直对齐。 The easiest way is to set line-height: 45px;最简单的方法是设置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;否则，您可以使用display:table-cell; vertical-align: middle; display:table-cell; vertical-align: middle; as demonstrated in the above link.如上面的链接所示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.