html - 不能垂直对齐文本!

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