如何垂直对齐内联元素

Question

我有这个锚标记,其间有文本垂直对齐文本.我正在使用这个css属性vertical-align:middle.什么都没发生.

Answer 1

你可以做到inline-block并给它一个line-height:

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

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

Answer 2

vertical-align仅适用于具有的元素display: table-cell,并且<IE8中不支持该属性值.

已知文字

如果您知道要居中的文本,那就相当容易了.你有两个选择.

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

您可以使用CSS的填充来添加填充顶部和底部,以使文本显示在中间.这对多行文本很有用.

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

<IE8的解决方法.

来源.