CSS垂直对齐文本

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (108)

我在一行中显示固定高度和宽度的框数,这些框是从<li>标签。现在我需要对齐垂直中心的文本。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>
提问于
用户回答回答于

line-height是垂直对齐文本的方式。这是相当标准的,。只要加上line-height: 100px给你的ul.catBlock li一切都会好起来的。

在这种情况下,可能需要将它添加到ul.catBlock li a而是因为所有文本都在lia上

用户回答回答于

使用display: table元素本身vertical-align: middledisplay: table-cell...

扫码关注云+社区

领取腾讯云代金券