垂直对齐多行文本到中间

Question

我需要将多行文本对齐到中间。这是我正在使用的标记的粗略指南。

<ul>
    <li>
        <a href='#'>This should be centered.</a>
    <li>
</ul>

从图像中可以看出，“工作”链接应该垂直居中。我的宽度和高度设置为vertical-align: middle;。我知道你需要为它实际工作设置行高，但问题就在于此。如果我将行高设置为72px（元素的高度），那么一些链接将向下拉伸页面，因为它们占用了两行。

有没有办法在不使用行高的情况下将多行文本对齐到中间？

Answer 1

像这样写

a{
 display:inline-block;
 vertical-align:middle;
}

＆安培;你可以像这样给display:table-cell;

li {
vertical-align:middle;
display:table-cell;
}

但它在IE7＆amp;以下

Answer 2

使用display：table-cell;在你的元素。

li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}

这会给你效果：

Answer 3

您可以尝试将显示更改为阻止以获取超链接并使用填充：

li a {display: block; padding: 30px 10px 30px 10px}

Answer 4

我想出了这个来处理容器内垂直对齐的100％高度/宽度锚点：

http://jsfiddle.net/khaustic/KDfN6/ 标记：

<div class="links one">
    <a href="#">One</a>
</div>
<div class="links two">
    <a href="#">Two Two</a>
</div>

的CSS：

* { 
    /*ie box model forever!*/
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.links {
    height: 5.0em;
    text-align:center;
    outline: 1px solid #333;
    float:left;
    margin: 0 1.0em;
    overflow:hidden;
}

.links.one { width: 8em; }
.links.two { width: 4em; }

.links a {
    width:10em;
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    height: inherit;
}