如何垂直对齐内联元素

Question

我有这个锚标签，它的文本在垂直对齐文本之间。我正在使用这个css属性vertical-align：middle。什么都没有发生。

Answer 1

vertical-align 仅适用于带有display: table-cell 的元素，

已知文本

如果您知道要居中的文本，这很容易。你有两个选择。

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

您可以使用 CSS 的 padding 来添加填充顶部和底部，使文本出现在中间。这对于多行文本很有用。

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

您可以利用 line-height 属性使文本垂直居中。这仅适用于一行文本。你可以猜到如果超过 1 会发生什么。

动态多行文字

这就是事情开始变得有些棘手的地方，可能会让您为桌子哭泣。

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

Workaround for < IE8.

Source.

Answer 2

<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

在http://jsfiddle.net/Z2ssq/1/查看工作示例

Answer 3

你可以把它设为inline-block，然后给它一个line-height：

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle 与工作示例：http://jsfiddle.net/KgqJS/