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的元素，并且

已知文字

如果您知道要居中的文字，那就相当容易了。你有两个选择。

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

Workaround for < IE8

Source

Answer 3

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

上的工作示例

如何垂直对齐内联元素

3 个答案:

已知文字

动态多行文字