display: свойство table в старых браузерах

Question

Для вертикального выравнивания динамического текста я использую span тег с display: table-cell. Он обернут div с размером display: table, и он работает так, как должен.

Но проблема в том, что это не работает в старых версиях firefox. К сожалению, мне нужна поддержка firefox 7 и выше.

Есть ли более простое решение помимо использования реальных таблиц html?

Answer 1

В соответствии с ссылкой MDN для display, table дисплей через CSS has been supported since Firefox version 1. Вы должны быть в порядке!

Answer 2

display:table-cell не все и заканчивают все вертикальное выравнивание. Вертикальное выравнивание может быть легко достигнуто только с помощью CSS.

Вам понадобятся три вещи:

1. А, содержащий делитель с определенной высоты (жидкости или статична, она не имеет значения).
2. Относительно позиционированный разделитель с 50% высоты.
3. Контейнер для контента, который вы хотите вертикально выровнять.

Однако вам нужно знать точную высоту вашего контейнера контента.

div#container { 
    height:500px; 
} 

div#paddingDivider { 
    height:50%; 
} 

div#contentContainer { 
    margin:0 auto; /* Centrally align the element */ 
    height:100px; /* Declare the exact height of the element */ 
    margin-top:-50px; /* Position half of the element inside the padding divider */ 
} 

JSFiddle example.