1. Вертикальне вирівнювання малих елементів
2. Вирівнювання по вертикалі в div-контейнері
3. умовний коментар
4. Рішення задачі
5. трохи подшаманіть
6. Центрування в блоці змінної висоти

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

Швидше за все ви вже знаєте про існування чудового властивості CSS vertical-align. І сам Бог велів нам користуватися для вертикального вирівнювання саме цією властивістю (не дарма ж воно носить таке, що говорить саме за себе, назва).

Постановка завдання: Необхідно вирівняти вміст блоку змінної висоти по центру щодо вертикалі.

Тепер приступимо до вирішення поставленого завдання.

І так, у нас є блок, висота його може змінюватися:

<div> Вміст блоку </ div>

Перше, що спадає на думку - це зробити наступний фінт:

<div style = "vertical-align: middle"> Вміст блоку </ div>

Є всі підстави припускати, що фраза Вміст блоку вирівняється по центру висоти div-контейнера.

Але не тут-то було! Ніякого очікуваного вирівнювання по центру таким чином ми не доб'ємося. А чому? Здавалося б все вказано правильно. Виявляється ось у чому заковика: властивість vertical-align можна застосовувати тільки для вирівнювання вмісту комірок таблиць або для вирівнювання малих елементів один щодо одного.

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

Вертикальне вирівнювання малих елементів

Припустимо є у вас рядок текст, яка розбита малими тегами <span> на частини:

<Span id = "perviy"> Вас </ span> <span id = "vtoroy"> вітає </ span> <span id = "tretiy"> шматок </ span> тексту!

Під рядковим тегом розуміється контейнер, поява якого не призводить до переносу вмісту на новий рядок.

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

<div> - це блоковий тег. Якщо ми укладемо шматки тексту в блоки <div>, то кожен з них виявиться на новому рядку. Використовуючи тег <span>, який, на відміну від <div>, є рядковим, перенесення контейнерів на новий рядок не буде, все контейнери <span> залишаться в одному рядку.

Контейнер <span> зручно використовувати при завданні частини тексту особливого форматування (виділення кольором, іншим шрифтом і т.д.)

Для контейнерів <span> застосуємо наступні властивості CSS:

#perviy {vertical-align: sub; } #Vtoroy {vertical-align: 3px; } #Tretiy {vertical-align: -3px; }

В результаті рядок тексту матиме ось такий вигляд:

Це і є ніщо інше, як вирівнювання малих елементів по вертикалі, і властивість CSS vertical-align з цим завданням чудово справляється.

Ми трохи відволіклися, тепер повертаємося до нашої основної задачі.

Вирівнювання по вертикалі в div-контейнері

Не дивлячись ні на що, для вирівнювання всередині div-контейнера ми будемо використовувати властивість vertical-align. Як я вже говорив, ця властивість можна використовувати в разі вирівнювання малих елементів (цей випадок ми докладно розглянули вище і для вирівнювання в div-контейнері він нам не підходить); залишається лише використовувати той факт, що vertical-align працює для елементів таблиці.

Як же ми зможемо це використовувати? У нас же немає таблиці, ми працюємо з div-контейнером.

Ха, виявляється дуже просто.

CSS-властивість display дозволяє перетворити наш блок div в клітинку таблиці, зробити це можна легко і невимушено:

Нехай у нас є div класу textalign:

<div class = "textalign"> Вміст блоку </ div>

Для даного блоку зазначаємо таке CSS-властивість:

.textalign {display: table-cell; }

Ця CSS-інструкція чудесним чином перетворить наш блок div в клітинку таблиці, візуально ніяк його не змінивши. А для елементу таблиці ми зможемо застосовувати властивість vertical-align повною мірою і буде працювати бажана центрування по вертикалі.

Однак, все так просто закінчиться не може. У нас же є чудовий браузер IE. Він не вміє працювати з властивістю display: table-cell (пропоную вам ознайомиться з табличкою, що ілюструє працездатність даного CSS-властивості в різних браузерах на сайті htmlbook.ru). Тому нам доведеться йти на різні хитрощі.

Існує безліч способів домогтися вирівнювання в div-контейнері для всіх браузерів:

• Спосіб із застосуванням додаткового допоміжного div-котнейнера
• спосіб з використанням expression-а . Пов'язані вони з хитрим обчисленням висот блоків. Без знання JavaScript тут не обійтися.
• Використання властивості line-height . Даний спосіб підходить тільки для вертикального вирівнювання в блоці відомої висоти, а значить в загальному випадку не можна застосувати.
• Використання абсолютного і відносного зсуву вмісту в разі браузера IE. Мені цей спосіб здається найбільш зрозумілим і простим. Крім того, він реалізуємо для div-контейнера змінної висоти. На ньому ми зупинимося докладніше.

Як ви розумієте, нам залишається вирішити проблему вертикального вирівнювання в IE, пов'язану з його нерозумінням властивості display: table-cell (ні IE6, ні IE7, ні IE8 з цією властивістю не знайомі). Тому скориставшись умовним коментарем спеціально для браузерів сімейства IE ми вкажемо інші властивості CSS.

умовний коментар

Конструкція виду:

<! - [if IE]> ... Інструкції, що діють тільки в разі виконання умови в квадратних дужках ... <! [Endif] ->

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

Інструкції, що містяться в подібному умовному коментарі будуть виконані тільки в разі, якщо браузер, що інтерпретує даний код, належить до сімейства IE.

Ви можете більш детально познайомиться з умовними коментарями .

Таким чином, використовуючи умовний коментар, ми зможемо сховати шматок коду від всіх браузерів крім IE.

Запам'ятали, пішли далі.

Рішення задачі

Через всю цю петрушки нам потрібно буде забезпечити наш HTML-код двома додатковими контейнерами. Ось яким чином буде виглядати наш блок з текстом:

<Div class = "textalign"> <div> <span> Це якийсь перевірочний текст. <br /> Він складається з двох рядків. </ span> </ div> </ div>

Для div-контейнера класу textalign задаються CSS-властивості, які вирівнюють його вміст по вертикалі для всіх нормальних браузерів (крім IE, зрозуміло):

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

І ще дві властивості, які задають ширину і висоту для блоку:

width: 500px; height: 500px;

Цього цілком достатньо для вирівнювання вмісту контейнера по центру щодо вертикалі, у всіх браузерах окрім IE.

Тепер починаємо дописувати властивості, пов'язані з вирівнюванням для браузерів сімейства IE (саме для них ми використовували додаткові блоки div і span):

Звертаємося до тегу div всередині блоку класу textalign. Для цього потрібно вказати спочатку назва класу, а потім, через пробіл, тег, до якого ми звертаємося.

.textalign div {position: absolute; top: 50%; }

Така конструкція означає: для всіх тегів div всередині блоку з класом textalign застосувати перераховані властивості.

Якщо все залишити так як є, то div-контейнер, який знаходиться всередині блоку textalign, буде позиціонуватися щодо верхнього лівого кута браузера. Нам же потрібно, щоб зміщення на 50% по вертикалі відбулося відносно батьківського блоку. Для цього достатньо застосувати CSS-властивість position: relative блоку textalign. Про ці особливості я детально розповідаю в відеоуроці по роботі з блоками div .

Відповідно, стилі задані для блоку textalign видозмінюються:

.textalign {display: table-cell; vertical-align: middle; width: 500px; height: 500px; position: relative; }

Тепер ліва верхня точка текстового блоку зміщена вниз на 50%.

Для пояснення того, що відбувається я намалював ілюстрацію:

Як видно з картинки, певного прогресу ми досягли. Але це ще не все! Верхня ліва точка жовтого блоку дійсно змістилася на 50% вниз, щодо батьківського (фіолетового) блоку. Але нам-то потрібно, щоб на п'ятдесяти відсотках висоти фіолетового блоку знаходився центр жовтого блоку, а не його верхня ліва точка.

Тепер в хід піде тег span і його відносне позиціонування:

.textalign span {position: relative; top: -50%; }

Тим самим, ми змістили жовтий блок вгору на 50% його висоти, щодо початкового положення. Як ви розумієте, висота жовтого блоку дорівнює висоті центрована контенту. І остання операція зі span-контейнером розташувала наш контент посередині фіолетового блоку. Ура!

трохи подшаманіть

Першо-на-першо нам потрібно заховати петрушку від всіх нормальних браузерів і відкрити її для IE. Зробити це можна, звичайно ж, за допомогою умовного коментаря, не дарма ми з ним знайомилися:

<! - [if IE]> <style type = "text / css"> .textalign div {position: absolute; top: 50%; } .Textalign span {position: relative; top: -50%; } </ Style> <! [Endif] ->

Є невелика проблемка. Якщо центруемий контент занадто високий, то це призводить до неприємних наслідків: з'являється зайва висота вертикальної прокрутки.

Рішення проблеми: потрібно додати властивість overflow: hidden блоку textalign.

Детально ознайомитися з властивістю overflow можна в відеоуроці по роботі з блоками div .

Остаточний вигляд CSS-інструкцій для блоку textalign має вигляд:

.textalign {display: table-cell; vertical-align: middle; width: 500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; }

При бажанні, ви можете подивитися HTML і CSS приклад всього вищесказаного .

Прошу пардону, забув згадати один важливий момент. Якщо ви будите намагатися задавати висоту блоку класу textalign в процентному співвідношенні, то у вас нічого не вийде.

Центрування в блоці змінної висоти

Дуже часто зустрічається необхідність поставити висоту блоку класу textalign не в пікселах, а у відсотках від висоти батьківського блоку, і вирівняти вміст div-контейнера по середині.

Заковика в тому, що для елементу таблиці неможливо цього зробити (а адже блок класу textalign перетворюється саме в клітинку таблиці, завдяки властивості display: table-cell).

У цьому випадку необхідно використовувати зовнішній блок, для якого вказано CSS-властивість display: table і вже для нього задавати процентне значення висоти. Тоді вкладений в нього блок, з CSS-директивою display: table-cell, благополучно успадкує висоту батьківського блоку.

Для того, щоб в нашому прикладі реалізувати блок змінної висоти, ми трохи подредактіруем CSS:

Класу textalign ми змінимо значення властивості display з table-cell на table і прибираючи директиву вирівнювання vertical-align: middle. Тепер ми сміливо можемо змінити значення висоти з 500 пікселів на, наприклад, 100%.

Таким чином, CSS-властивості для блоку класу textalign будуть мати такий вигляд:

.textalign {display: table; width: 500px; height: 100%; position: relative; overflow: hidden; border: 1px solid black; }

Залишається реалізувати центрування вмісту. Для цього div-контейнеру, вкладеному в блок класу textalign (це той самий жовтий блок на малюнку), необхідно задати CSS-властивість display: table-cell, тоді він успадкує висоту в 100% від батьківського блоку textalign (фіолетовий блок). І нам ніщо не завадить вирівняти вміст вкладеного div-контейнера по центру властивістю vertical-align: middle.

Отримуємо ще один додатковий список CSS-властивостей для блоку div, вкладеного в контейнер textalign.

.textalign div {display: table-cell; vertical-align: middle; }

Ось і вся хитрість. При бажанні, ви можете подивитися на зверстаний блок змінної висоти з відцентрованим вмістом.

Додаткову інформацію по вертикальному вирівнюванню блоку змінної висоти можна отримати тут .

З повагою, Андрій Морковин .