如何使用css在LI中垂直居中定位文本?
关于这个问题的变化已经被问了很多次。使用css垂直居中是一项挑战。
我有一个特殊的场景,处理水平显示的列表。标记如下:
<ul id='ul1' class='c'>
<li><a href='javascript:void(0)'>Fribble Fromme</a></li>
<li><a href='javascript:void(0)'>Fobble</a></li>
<li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>
样式如下:
ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}
结果列表如下所示:
但我希望所有框的高度相同,并且希望文本在每个框中垂直居中。我可以通过为A元素添加height
样式来设置框的高度。结果如下所示:
...这接近我想要的,但垂直居中没有发生。
我可以为文本设置line-height
as suggested in this post,以进行垂直居中。如果我知道哪些元素将获得多行文本,我甚至可以为不同的A元素选择不同的line-height
值。但我不知道哪些需要多条线路。
当某些A元素的文本换行时,如何使其居中?
解决方案
您可以将display:table
等与vertical-align:middle
ul.c {
text-align:center;
display:table;
}
ul li {
float:left;
}
ul li a {
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
width:100px;
height:52px;
display:table-cell;
vertical-align:middle;
}
ul li a:hover {
background: #CCC;
}
示例:http://jsfiddle.net/kf52n/2/
相关文章