无法垂直对齐文本！

Question

我知道它非常简单，但我已经编码了一整天，但它似乎不起作用。

我希望文本在框内垂直居中。我在做什么？

http://jsfiddle.net/UAyNh/

更新： 这适用于文本，但按钮不会居中。看看 Safari 与 Chrome 的对比。 http://jsfiddle.net/Bz9pB/

Answer 1

我给容器 line-height 等于它的高度。

例如。

div.box
{
     line-height: 40px;
     height: 40px;
}

我知道的唯一其他方法是使用表格或使用 CSS 复制表格：

<div class="table">
    <div class="row">
        <div class="cell">
            text
        </div>
    </div>
</div>

并且

div.table{ display: table; }
div.row{ display: table-row; }

div.cell
{
    display: table-cell;
    vertical-align: middle;
}

Answer 2

使用 line-height 并使其等于元素的 height （只要你的元素只有一行）：

height: 25px;
line-height: 25px;

JS Fiddle 演示。

Answer 3

如果文本在一行上并且该行的高度与您的示例中的高度相似，您可以通过设置 line-height 来解决它：

height: 25px;
line-height: 25px;