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 равный полученному значению для вертикального центрирования
Loading Disqus Comments ...
Loading Facebook Comments ...

One thought on “vertical-align:middle в IE7

  1. acsy:

    Тільки треба вказати ще висоту контейнер (height), щоб даний фільтр (expression ) знав від чого визначати позицію.

Добавить комментарий для acsy Отменить ответ

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