li内的CSS垂直对齐文本

我正在连续显示从<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>

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

line-height垂直对齐文本的方式。这是相当标准的，我不认为这是“黑客”。只需添加line-height: 100px到您的文件中ul.catBlock li，一切都会好起来的。

在这种情况下，您可能必须将其添加到，ul.catBlock li a因为内的所有文本li也在内a。当您执行此操作时，我已经看到一些奇怪的事情发生，因此请尝试两者，看看哪个可行。

无论此响应有多晚，遇到此问题的任何人可能都想尝试

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

浏览器对flexbox的支持要比@scottjoudry在上面发表他的回答时要好得多，但是如果您想支持更老的浏览器，则可能仍要考虑前缀或其他选项。犬：弯曲

出乎意料的是（或没有），该vertical-align工具实际上最适合此工作。最好的是，不需要Javascript。

在下面的示例中，我将outer类放置在身体的中间，并将inner类放置在类的中间outer。

预览：http：//jsfiddle.net/tLkSV/513/

HTML：

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

垂直对齐通过对齐相邻元素的中心来进行。对单个元素应用垂直对齐绝对没有任何作用。如果您添加的第二个元素没有宽度，但是是容器的高度，则单个元素将移动到此无宽度元素的垂直居中位置，从而使其垂直居中。唯一的要求是将两个元素都设置为inline（或inline-block），并将其vertical-align属性设置为vertical-align: middle。

注意：您可能会在下面的代码中注意到我的<span>标签和<div>标签在接触。因为它们都是内联元素，所以空格实际上会在no-width元素和div之间添加一个空格，因此请务必将其省略。

将来，这个问题将由flexbox解决。目前，浏览器支持不佳，但是在所有当前浏览器中都以一种或另一种形式支持。

浏览器支持：http : //caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Flexbox的背景：http：//css-tricks.com/snippets/css/a-guide-to-flexbox/

除了Asaf的答案（没有提供任何代码或任何示例）之外，这里没有提供完美的答案，因此我想贡献我的力量...

序，使vertical-align: middle;工作，你需要使用display: table;你的ul元素和display: table-cell;对li元素和比你可以使用vertical-align: middle;的li元素。

您不需要提供任何明确的margins，paddings让你的文字垂直方向的中间。

演示版

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

如此处所述：https : //css-tricks.com/centering-in-the-unknown/。

经过实际测试，最可靠但最优雅的解决方案是<li />在第一个子元素中插入辅助内联元素，该子元素的高度应设置为其父对象高度的100％<li />，并vertical-align设置为中间。为此，您可以放置​​一个<span />，但是最方便的方法是使用li:after伪类。

屏幕截图：

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

试试这个解决方案

在大多数情况下效果最佳

您可能需要使用DIV，而不是李为

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

垂直对齐中间的简单解决方案...对我来说，它就像一个魅力

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}