Не могу вертикально выровнять текст!

Question

Я знаю, что это чрезвычайно просто, но я кодировал весь день, и, похоже, это не работает.

Я хочу, чтобы текст располагался вертикально по центру внутри поля. Что я делаю?

http://jsfiddle.net/UAyNh/

UPDATE: Это работало для текста, но кнопки не центрировались. Проверьте это на 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

Если текст будет в одной строке, а высота этой строки будет такой же, как в вашем примере, вы можете решить ее, установив высоту строки:

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