Вертикальне вирівнювання за допомогою CSS

1. Рішення № 1 з ипользованием висоти рядка line-height
2. Рішення №2 з використання табличного поведінки осередків (display: table)
3. Рішення №3 з абсолютно позиціонування

Наша взаимовыгодная связь https://banwar.org/

Дуже часто при верстки доводиться займатися вирівнювання об'єктів, один щодо іншого. Найчастіше така проблема є для вертикального вирівнювання, з горизонтальним більш-менш все зрозуміло. Є кілька рішень для вирівнювання. Розглянемо приклад.

<Div class = "inner"> текст який повинен бути вирівнюються по вертикалі </ div>

Рішення № 1 з ипользованием висоти рядка line-height

div.inner {border: 1px solid red; height: 75px; line-height: 75px}

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

Якщо у нас блок буде вже, ніж вміст, то вийде наступне

Щоб виправити цю проблему, є два рішення.

Рішення №2 з використання табличного поведінки осередків (display: table)

Міняємо код структури, додаємо всього один блок

<Div class = "inner"> <div> текст який повинен бути вирівнюються по вертикалі </ div> </ div>

І тепер задаємо display для обох блоків. Для зовнішнього блоку задаємо display: table, для внутрішнього задаємо display: table-cell. Це необхідно з точки стандартів верстки. Осередок без таблиці не може існувати

.inner {border: 1px solid red; height: 75px; width: 200px; display: table} .inner div {display: table-cell; vertical-align: middle}

Використовуючи правило vertical-align: middle, сучасні браузери вирівнюють текст всередині осередку по вертикалі.

Але є такі бразуер, як Internet Explorer 6 і 7 версії, вони не розуміють такої поведінки. Відповідно з ними треба боротися відповідним методом:

.inner div {margin-top: expression ((parentNode.offsetHeight - this.offsetHeight) <0? "0": (parentNode.offsetHeight - this.offsetHeight) / 2 + "px")}

Це тільки два способи. Расcмотрім ще кілька методів вирівнювання.

Рішення №3 з абсолютно позиціонування

Ми залишаємо тугіше двох блочну структуру. У цьому рішенні ми обманюємо браузери, кажучи що всередині блоку лежить рядковий елемент, а не блок. Ось такий CSS:

.inner {position: relative; height: 200px; width: 200px; border: 1px solid red} .inner div {position: absolute; top: 50%; height: 50px; margin-top: -25px}

Поведінка пояснює дуже просто. З блоку який фіксовані розміри має вирізається блок, у якого не відомі розміри. Всі браузери автоматично вираховують його висоту. Відповідно ми зможемо абсолютно спозиционировать блок внтурі зовнішнього блоку. Цей метод до речі підходить досить успішно для багатьох завдань з центрування блоків. Наприклад, для центрування зображення з невідомими розмірами в блоці з відомими розмірами або, наприклад, горизонтальне вирівнювання меню зробленого на структурі UL-LI.

джерела:

1. http://habrahabr.ru/blogs/css/71236/
2. http://blog.sribna.com/vertikalnoe-vyiravnivanie-v-css-chast-2.htm

Додати коментар