Вы можете вертикально выровнять плавающий элемент так, как это работает в IE 6+. Он также не нуждается в полной разметке таблицы. Этот метод не совсем чистый - он включает в себя обертки и есть несколько вещей, о которых нужно знать, например: если у вас слишком много текста, превышающего контейнер - но это довольно хорошо.
Краткий ответ: Вам просто нужно применить display: table-cell к элементу внутри плавающего элемента (ячейки таблицы не плавают) и использовать запасной вариант с position: absolute и top для старого IE.
Длинный ответ: Вот jsfiddle, показывающий основы . Подытоженные важные вещи (с условным комментарием, добавляющим класс .old-ie):
.wrap {
float: left;
height: 100px; /* any fixed amount */
}
.wrap2 {
height: inherit;
}
.content {
display: table-cell;
height: inherit;
vertical-align: middle;
}
.old-ie .wrap{
position: relative;
}
.old-ie .wrap2 {
position: absolute;
top: 50%;
}
.old-ie .content {
position: relative;
top: -50%;
display: block;
}
Вот jsfiddle, который намеренно выделяет мелкие неисправности с помощью этого метода. Обратите внимание, как:
- В стандартных браузерах содержимое, превышающее высоту элемента-оболочки, перестает центрироваться и начинает спускаться по странице. Это не большая проблема (вероятно, выглядит лучше, чем ползучая страница), и ее можно избежать, избегая слишком большого контента (обратите внимание, что, если я ничего не пропустил, методы переполнения, такие как
overflow: auto;, похоже, не работа)
- В старом IE элемент содержимого не растягивается, чтобы заполнить доступное пространство - высота - это высота содержимого, а не контейнера.
Это довольно незначительные ограничения, но о них стоит знать.
Код и идея адаптированы отсюда