Решение кросс-браузерного типа несоответствий?

Question

Моя цель состоит в том, чтобы текст внутри этого div отображался в середине его кросс-браузера контейнера.

Если бы я смог добиться этого, это позволило бы мне использовать меньше изображений.

http://jsfiddle.net/tMFaD/

Обратите внимание, как этот пример выглядит по-разному в Chrome / Safari и Firefox.Кажется, что проблема, очевидно, связана с типом / line-height / аналогичным («1» выше в Firefox).

Можно ли это легко сделать?

ОБНОВЛЕНИЕ: Этонебольшая разница, которую я пытаюсь решить: http://cl.ly/2A2o371c2O2r3q0T0R2E

ОБНОВЛЕНИЕ 2: Я не нашел окончательного кросс-браузерного решения, но некоторые ответы в этой теме должны прийтидостаточно близко для большинства.Решением, которое я использовал, было использование правила, ориентированного на браузер, для этого элемента.Я мог бы также использовать изображения / спрайты.

Answer 1

Вы можете установить высоту строки в соответствии с высотой поля, а затем удалить верхний и нижний отступы. Это выровняет его в (вертикальной) середине поля.

Answer 2

Вы можете сделать это несколькими способами:

.box {
    font-size: 44px;
    font-weight: bold;
    color: white;
    text-align: center;
    background: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 80px;
    height: 80px;
}​

.box {
    width: 80px;
    height: 80px;
    font-size: 44px;
    line-height: 80px;
    font-weight: bold;
    color: white;
    background: pink;
    text-align: center;
}

Оба будут давать одинаковые результаты:

http://jsfiddle.net/spacebeers/s9Urm/8/

РЕДАКТИРОВАТЬ: Чтобы получить уровень или кросс-браузерную / кросс-операционную точность, вы после того, как я думаю, вам придется использовать отдельные правила стиля для некоторых из них или просто использовать изображения.

Answer 3

ДРУГОЕ предложение, используйте line-height для управления vertical middle вместо padding:

.box {
    display:block;
    font-size: 44px;
    font-weight: bold;
    color: white;
    text-align: center;
    background: pink;
    float: left;
    line-height:80px;
    width:80px;
    height:80px;
}​