html - li 内的 CSS 垂直对齐文本

Question

我正在显示由

标签生成的具有固定高度和宽度的连续框数。现在我需要将文本垂直居中对齐。CSS vertical-align 没有影响，也许我遗漏了什么？？？

我不是在寻找使用(边距、填充、行高)的技巧，这些技巧不会起作用，因为有些文本很长并且会分成两行。

请找到实际代码:

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>

Answer 1

用 display: table 定义父级和元素本身 vertical-align: middle和 display: table-cell .