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>
322642 次浏览
小开

line-height是垂直对齐文本的方式。这是相当标准的，我不认为这是一个“黑客”。只要把 line-height: 100px加到你的 ul.catBlock li上就行了。

In this case you may have to add it to ul.catBlock li a instead since all of the text inside the li is also inside of an a. I have seen some weird things happen when you do this, so try both and see which one works.

小开

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

小开

令人惊讶(或不惊讶)的是，vertical-align工具实际上最适合这项工作

在下面的示例中，我将 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: middle。

Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.

小开

这里没有提供完美的答案，除了 Asaf 的答案，没有提供任何代码或任何例子，所以我想贡献我的..。

为了使 vertical-align: middle;工作，需要对 ul元素使用 display: table;，对 li元素使用 display: table-cell;，然后对 li元素使用 vertical-align: middle;。

您不需要提供任何明确的 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;
}
小开

今后，这个问题将通过柔性箱来解决。现在的浏览器支持很差，但是在当前所有的浏览器中都支持这种或那种形式。

浏览器支持: 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/

小开

正如这里解释的: https://css-tricks.com/centering-in-the-unknown/。

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

Screenshot: enter image description here

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而不是 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>

小开

无论这种反应可能已经迟了多少年，任何人遇到这种情况可能只是想尝试一下

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

与@scottjoudry 在上面发表回复时相比，现在对 Flexbox 的浏览器支持要好得多，但是如果你想支持更老的浏览器，你可能仍然需要考虑前缀或其他选项。弯曲

小开

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

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

提交答案