1. Найбільш поширене рішення
2. Метод малих блоків
3. Уникаємо використання expression
4. В яких браузерах працює?

У статті розповідається, яким чином проводиться вирівнювання блоку вздовж осі ординат або, простіше кажучи, по вертикалі.

Сьогодні ми поговоримо про те, яким чином проводиться вирівнювання блоку вздовж осі ординат або, простіше кажучи, по вертикалі, причому ми будемо розглядати той випадок, коли елемент повинен буде розташовуватися по центру свого батька.

В ті старі добрі часи, коли панувала верстка в табличному стилі, не виникало жодних проблем, коли потрібно було розташувати об'єкта в центрі щодо вертикальної осі. Для цього слід було всього лише звернутися до властивості vertical-align і визначити для нього значення middle.

Коли табличная верстка стала історією, а на її місце прийшла блокова модель, то з центруванням блоків по висоті виникли деякі проблеми. Як виявилося, блоковий елемент не розуміє властивість 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+

Оцінок: 2 (середня 5 з 5)