Как выровнять элементы по вертикали кросс-браузера?

Question

Я делаю вертикальное выравнивание, используя свойство vertical-align: middle, которое работает в Chrome, но не в IE.

Answer 1

Просто добавьте это: display: table-cell;

Answer 2

У меня тоже была эта проблема с таблицей календаря, созданной моим коллегой. Календарь хорошо просматривался в Chrome, Firefox, но текст даты в верхнем левом углу каждого дня наполовину обрезался Я удалил свойство вертикального выравнивания и заменил его позицией. Смотри ниже.

Оригинальный CSS:

.dayText {
    vertical-align: text-bottom;
}

My CSS Fix:

.dayText {
    position: relative;
    top: 10px;
    left: 0px;
    height: inherit; 
}

Answer 3

У меня была похожая проблема

У меня было следующее

<div>
  <span> some text </span>
</div>

Все это было в заголовке таблицы.

Мне удалось обойти этодобавьте следующую строку в диапазон

<div>
  <span style="position: absolute; padding-top:1px;"> some text </span>
</div>

Answer 4

Put

style="valign:middle; vertical-align:middle;"

Более новые версии IE будут выбирать valign:middle и игнорировать vertical-align:middle.

Все другие браузеры, такие как Firefox, Chrome, Safari и т. Д., Будут выбирать vertical-align:middle и игнорировать valign:middle.

Answer 5

Если вы хотите поместить текст в одну строку, например, заголовок заголовка в вашем поле, используйте line-height

Например, с полями шириной 200 пикселей и высотой 40 пикселей:

.the_box{
width: 200px;
height: 40px;
line-height: 40px;
}

Это просто, элегантно и кросс-браузерно. Если у вас более длинный текст, чем 200px, этот метод не будет работать.

Answer 6

Предположительно , IE8 + поддерживает vertical-align, но IE7-поддержка глючит. В старых браузерах вы можете попробовать установить CSS-код контейнера элемента на top: 50% или top: -50%.