CSS在li中垂直对齐文本
CSS在li中垂直对齐文本
提问于 2011-12-17 17:36:57
我正在显示一行中具有固定高度和宽度的框的数量，这些框是从标签生成的。现在，我需要将文本垂直居中对齐。CSS垂直对齐没有影响，也许我遗漏了什么？
我没有寻找技巧使用(边距，填充，行高)，这些将不会工作，因为一些文本很长，将打破为两行。
请找到实际代码：
CSS代码
ul.catBlock{
width:960px;
height: 270px;
border:1px solid #ccc;
}
ul.catBlock li{
list-style: none;
float:left;
display:block;
text-align: center;
width:160px;
height: 100px;
}
ul.catBlock li a{
display: block;
padding: 30px 10px 5px 10px;
height:60px;
}HTML代码
<ul class="catBlock">
<li><a href="#">IP Phone</a></li>
<li><a href="#">Dual SIM Switch Server</a></li>
<li><a href="#">IP PBX</a></li>
</ul>回答 5
Stack Overflow用户
发布于 2011-12-20 23:34:53
用display: table定义父元素，用vertical-align: middle和display: table-cell定义元素本身。
Stack Overflow用户
发布于 2017-12-12 00:53:35
无论这种反应可能晚了多少年，遇到这种情况的任何人都可能只想试一试。
li {
display: flex;
flex-direction: row;
align-items: center;
}浏览器对flexbox的支持比@scottjoudry在上面发布他的回应时要好得多，但如果你想支持更老的浏览器，你可能仍然想要考虑前缀或其他选项。caniuse: flex
Stack Overflow用户
发布于 2011-12-17 23:37:57
line-height是垂直对齐文本的方式。这是非常标准的，我不认为这是一个“黑客”。只需将line-height: 100px添加到您的ul.catBlock li中，就可以了。
在这种情况下，您可能需要将其添加到ul.catBlock li a中，因为li中的所有文本也都在a中。当你这样做的时候，我已经看到一些奇怪的事情发生了，所以尝试两个，看看哪一个有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8543859
复制相关文章
相似问题