Question

我正在显示一行中具有固定高度和宽度的方框，从＆lt; li＆gt;生成标签。现在我需要在垂直中心对齐文本。 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是您垂直对齐文字的方式。这是非常标准的，我不认为它是“黑客”。只需将line-height: 100px添加到您的ul.catBlock li即可。

在这种情况下，您可能需要将其添加到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，然后使用{{ 1}}用于vertical-align: middle;元素。

您无需提供任何明确的li，margins即可使文字垂直居中。

Demo

paddings

Answer 7

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

根据实际测试，最可靠而优雅的解决方案是将辅助内联元素作为第一个子元素插入<li />元素，其高度应设置为100％（其父级的高度， <li />），vertical-align设置为中间。要实现这一点，您可以设置<span />，但最方便的方法是使用li:after伪类。

截图： 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;
}

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

li里面的CSS垂直对齐文本

CSS代码

HTML代码

9 个答案:

在大多数情况下效果最佳