li中的CSS垂直对齐文本 [英] CSS vertical alignment text inside li

查看:125
本文介绍了li中的CSS垂直对齐文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在一行中显示固定高度和宽度的方块,由< li>标签。
现在我需要在垂直中心对齐文本。
CSS vertical-align没有影响,也许我缺少一些东西???

I am displaying number of boxes in a row with fix height and width, generated from <li> tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something???

我不是在寻找技巧使用(margin,padding,

I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.

请找到实际的代码:

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代码



HTML code

<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>


推荐答案

使用 :table 和元素本身与 vertical-align:middle display:table-cell

这篇关于li中的CSS垂直对齐文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆