li里面的CSS垂直对齐文本

Question

我正在显示从<li>标签生成的具有固定高度和宽度的行数。 现在我需要在垂直中心对齐文本。 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定义元素本身。

Answer 2

line-height是您垂直对齐文本的方式。 这是非常标准的，我不认为它是“黑客”。 只需在你的ul.catBlock li添加line-height: 100px就可以了。

在这种情况下，您可能必须将其添加到ul.catBlock li a替代，因为里面所有的文字li也是一个内部a 。 我发现当你这样做时会发生一些奇怪的事情，所以试试两个并看看哪个有效。

Answer 3

令人惊讶（或不）， 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; }

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

注意：您可能会在下面的代码中注意到我的<span>标记和<div>标记正在触及。 因为它们都是内联元素，所以空格实际上会在无宽度元素和div之间添加一个空格，因此请务必将其保留。

Answer 4

将来，这个问题将由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/

Answer 5

无论多少年后这种反应可能是，任何遇到这种情况的人都可能只是想尝试一下

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

浏览器对flexbox的支持比@scottjoudry在上面发布他的响应要好得多，但是如果你试图支持更旧的浏览器，你可能仍然想要考虑前缀或其他选项。 caniuse：flex

Answer 6

除了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;
}

Answer 7

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

正如在实际测试中所测试的那样，最可靠而又优雅的解决方案是将辅助内联元素作为第一个子元素插入到<li />元素中，其高度应设置为100％（其父级的高度， <li /> ），并将其vertical-align设置为middle。 要实现这一点，你可以放一个<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;
}

Answer 8

试试这个解决方案吧

在大多数情况下效果最佳

你可能不得不使用div而不是li

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

Answer 9

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

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