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是你如何垂直对齐文本.这是非常标准的,我不认为它是"黑客".只需添加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

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

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

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

Answer 5

将来,这个问题将由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 6

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

\n\n

\n

经过实际测试，最可靠且优雅的解决方案是在元素中插入一个辅助内联元素<li />作为第一个子元素，其高度应设置为 100%（其父元素\xe2\x80\x99s 高度，即<li />） ，并将其vertical-align设置为中间。要实现这一点，您可以放置​​一个<span />，但最方便的方法是使用li:after伪类。

\n

\n\n

屏幕截图：\n

\n\n

ul.menu-horizontal {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    vertical-align: middle;\n}\n\nul.menu-horizontal:after {\n    content: \'\';\n    clear: both;\n    float: none;\n    display: block;\n}\n\nul.menu-horizontal li {\n    padding: 5px 10px;\n    box-sizing: border-box;\n    height: 100%;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    float: left;\n}\n\n/* The magic happens here! */\nul.menu-horizontal li:before {\n    content: \'\';\n    display: inline;\n    height: 100%;\n    vertical-align: middle;\n}\n

\n

Answer 7

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