列表项中间垂直对齐
Ste*_*eve 15 html css vertical-alignment
我有以下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>
这给了我以下内容:
dra*_*yre 22
如果添加了<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/
- 如果你需要IE <8兼容性,那么不,不是真的.我发现自己诉诸于表格比我想承认的更多,因为IE6/7兼容性是用户的要求.只要咒语咒语,确保没有人在看,并进入黑暗的一面.制作十字标志是可选的. (2认同)
| 归档时间： |
|
| 查看次数： |
41529 次 |
| 最近记录： |