Vertical-align:middle в IE7

Заметка для себя чтобы не искать.

Для нормальных браузеров помещаем текст/картинку в контейнер, для контейнера задаём:

	display:table-cell;
	vertical-align:middle;

для ie7 контейнеру задаем display:block

А для самого элемента, который нужно выровнять:

display:block;
margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');

Как это работает

  1. parentNode.offsetHeight/2
    определяет высоту контейнера и делит ее на 2. Это дает нам отступ ровно в половину высоты экрана
  2. -(parseInt(offsetHeight)/2))
    Определяет высоту самого центрируемого блока. Отнятое от высоты родителя дает нам конечный margin-top
  3. <0 ? «0» :
    Если полученная разница отрицательная, то отступу присваивается значение 0.
  4. <0 ? «0» :
    Если же полученный результат больше либо равен 0, то повторяем вычисления и берем margin-top равный полученному значению для вертикального центрирования
Запись опубликована в рубрике html & css с метками , , . Добавьте в закладки постоянную ссылку.

Один комментарий: Vertical-align:middle в IE7

  1. Алекс говорит:

    Спасибо, помогло!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *