不能使文本垂直对齐！

问题描述

| 我知道它非常简单，但是我整天都在编码，而且似乎没有用。 我希望文本在框内垂直居中。.我在做什么？ http://jsfiddle.net/UAyNh/ 更新： 这适用于文本，但按钮不会居中。在Safari和Chrome中查看。 http://jsfiddle.net/Bz9pB/     

解决方法

我给容器的行高等于它的高度。 例如。

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

    ,使用

line-height

并使之等于元素的

height

（只要您的元素只有一行，无论如何）：

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

JS Fiddle演示。     ,如果文本在一行上并且该行的高度与示例中的高度相似，则可以通过设置line-height来解决该问题：

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