В статье рассказывается, каким образом производится выравнивание блока вдоль оси ординат или, проще говоря, по вертикали.
Сегодня мы поговорим о том, каким образом производится выравнивание блока вдоль оси ординат или, проще говоря, по вертикали, причем мы будем рассматривать тот случай, когда элемент должен будет располагаться по центру своего родителя.
В те старые добрые времена, когда господствовала верстка в табличном стиле, не возникало никаких проблем, когда нужно было расположить объекта в центре относительно вертикальной оси. Для этого следовало всего лишь обратиться к свойству vertical-align и определить для него значение middle.
Защитные очки для лазера купить там. купить песок щебень дешево с доставкой в Санкт-Петербурге. продать реферала с сайта wmmail,ru в россии.
Когда табличная верстка стала историей, а на ее место пришла блочная модель, то с центрированием блоков по высоте возникли некоторые проблемы. Как оказалось, блочный элемент не понимает свойство vertical-align со значением middle. Однако, правила CSS могло решить проблему, переопределив блочное поведение на табличное. Это можно сделать с помощью свойства display, назначив ему значение table-cell. После этого блок будет восприниматься системой, как ячейка таблицы. И тут возникает вопрос, в чем же сложность. Ответ довольно предсказуем - Interner Explorer. Этот старичок не позволит Вам расслабляться. Дело в том, что браузер не может работать со значением table-cell. Но и на него можно найти управу, воспользовавшись программным решением на базе expression.
Наиболее распространенное решение
Итак, рассмотрим более подробно решение, которое упоминалось выше. Алгоритм действие довольно простой, хоть и мороки Вам хватит:
- в первую очередь находим контейнер, внутри которого будет осуществляться вертикальная центровка. Указываем для него фиксированную высоту, воспользовавшись возможностями свойства height, а далее уже по известному сценарию. Определяем блочному элементу свойства ячейки и указываем значение middle для vertical-align. Таким образом, для большинства браузеров мы справились с поставленной задачей;
- теперь возвращаемся к горячо любимому IE. Лечение на основе expression будет представлять из себя скрипт, который поможет вычислить браузеру высоту необходимого родителя и разместить контейнер в его центре. Если мы будем центровать текст, то для него нужно установить вспомогательный контейнер.
Для примера предлагаю выбрать именно тот случай, когда нужно равнять текст:
HTML
<div> <span>текст, который будет размещен по центру</span> </div>
CSS
div { background: #fe9400; /*выделим границы нашего блока другим цветом*/ display: table-cell;/*назначаем блоку свойства ячейки таблицы*/ height: 200px; /*ограничиваем высоту элемента*/ vertical-align: middle; /*ставим строку текста в центр*/ color: #283339; /*для читабельности изменим цвет букв*/ width: 400px;/*ширину придется тоже ограничить*/ text-align:center;/*выравнивание по горизонтали*/ } /*лечим непослушный IE*/ * html div span { display: block; z-index: expression( runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2) <0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px'); } *:first-child+html div span { display: block; z-index: expression( runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2) <0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px'); }
В результате чего в браузере получим следующую картину
По такому же принципу центруются картинки и прочие элементы.
При использовании данного метода стоит учитывать ряд особенностей, которые могут негативно повлиять на выравнивание:
- нельзя присваивать родителю свойства плавающего элемента (float), так как в таком случае он определится браузером блочным элементом по умолчанию;
- в тоже время нельзя допускать абсолютное и фиксированное позиционирование для этого же элемента (свойство position со значением absolute или fixed);
- контейнер, который нужно выравнивать, должен позиционироваться, как блочный элемент (принципиально для IE).
Метод строчных блоков
Этот способ имеет очень много сходств с предыдущим. В соответствии с ним тоже прибегают к свойству display и vertical-align. Это позволяет отцентровать элементы во всех адекватных браузерах. Для всеми любимого старичка нужно снова обращаться к expression, однако в этом случае принцип его работы будет слегка отличаться. В этот раз мы вставим строчный контейнер, благодоря которому будет организовано необходимое выравнивание. Для сохранения чистоты кода предлагаю этот элемент добавить с помощью эмуляции before.
HTML
<div> <span>текст, который будет размещен по центру</span> </div>
CSS
div { background: #fe9400; /*выделим границы нашего блока другим цветом*/ display: table-cell;/*назначаем блоку свойства ячейки таблицы*/ height: 200px; /*ограничиваем высоту элемента*/ vertical-align: middle; /*ставим строку текста в центр*/ color: #283339; /*для читабельности изменим цвет букв*/ width: 400px;/*ширину придется тоже ограничить*/ text-align:center;/*выравнивание по горизонтали*/ } /*лечим IE*/ div { z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML('beforeEnd', '<div class="auxiliary"></div>')); } .auxiliary { display: inline-block;/*присваиваем строчно-блочные свойства*/ vertical-align: middle;/*опять центровка*/ width: 0px; /*убиваем ширину объекта*/ height: 100%;/*высота объекта на всю страницу*/ } span { display: inline-block;/*присваиваем строчно-блочные свойства*/ } span, .auxiliary { vertical-align: middle;/*опять центровка*/ display: inline;/*строго строчные параметры*/ }
Если все выполнить по указаниям, то получим тот же результат в браузере, что и для предыдущего метода.
Избегаем использования expression
Также существует метод, позволяющий избежать применения expression. Он заключается в применении вспомогательного блока. Такой метод имеет свою особенность и вынуждает разделить верстку, предназначенную нормальным браузерам и для IE.
HTML
<div> <div class="block"> <span> текст, который будет размещен по центру</span > </div> </div>
CSS
div { position:relative;/*устанавливаем относительное позиционирование*/ display:table;/*контейнер со свойствами таблицы*/ height: 400px; /*ограничиваем высоту элемента*/ width: 350px; /*ограничиваем ширину элемента*/ border: 1px solid #539127;/*обводим контейнер тонкой линией по периметру*/ vertical-align: middle; /*и снова центровка*/ text-align: center;/*тоже, только по горизонтали*/ } .block { width:100%;/*растягиваем контейнер на всю ширину*/ display:table-cell;/*свойства ячейки таблицы*/ vertical-align:middle;/*и снова центровка*/ text-align:center;/*тоже, только по горизонтали*/ position:relative;/*устанавливаем относительное позиционирование*/ } span { vertical-align: middle;/*опять центровка*/ display: inline;/*строго строчные параметры*/ }
Такой код будет равнять блоки в нормальных браузерах, а для IE используем следующее
CSS
div { overflow:hidden/*контролируем содержимое*/ } div, .block { display:block/*блочные свойства для элемента*/ } /*центровка через позиционирование*/ .block { top:50%;/*середина по высоте*/ left:0;/*слева без отступа*/ } span { top:-50%;/*компенсация места снизу*/ position:relative;/*устанавливаем относительное позиционирование*/ display:block/*блочный элемент*/ }
Какую выгоду можно извлечь из данного метода?
- не нужно использовать expression;
- нет никаких ограничений для родительского контейнера в плане позиционирования.
На ряду с этим есть небольшой недостаток:
- лишний блок в коде HTML.
В каких браузерах работает?
6.0+ | 7.0+ | 10.0+ | 3.1+ | 3.5+ |