不能垂直对齐文字！

Question

我知道它非常简单，但我整天都在编码，而且它似乎无法正常工作。

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

http://jsfiddle.net/UAyNh/

更新： 这适用于文本，但按钮不会居中。在Safari vs. 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 demo

Answer 3

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

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