Огляд css-властивості vertical-align, черговий блог фрілансера
Огляд CSS-властивості vertical-align
Досить часто від веб-розробників можна почути обурений вигук: "vertical-align не працює!". Незважаючи на те, що призначення цієї властивості випливає з його назви, на практиці, початківці розробники, так само як і багато ветеранів CSS, часто зазнають труднощів з його застосуванням.
У сьогоднішній статті, я постараюся розкрити всі незрозумілі моменти цього CSS-властивості.
Чого не робить vertical-align
Найбільш поширена помилка щодо властивості vertical-align полягає в тому, що воно впливає на вертикальне вирівнювання всіх дочірніх елементів контейнера, до якого застосовується. Наприклад, якщо ми застосуємо до контейнера властивість vertical-align: top. передбачається, що весь вміст контейнера буде вирівняно по верхньому краю контейнера.
Це нагадує мені старі, добрі часи табличної верстки:
У цьому прикладі табличній осередки, властивість valign (зараз вже заборонене в HTML5), дійсно притисне весь вміст комірки до верхнього краю. Можливо виходячи з цього, CSS-розробники очікують схожого ефекту, від застосування властивості vertical-align.
Але властивість vertical-align так не працює.
Як насправді працює vertical-align
Властивість vertical-align можна розділити на три простих правила:
- Воно застосовується тільки до елементів з властивостями display: inline; і display: inline-block;
- Воно впливає на стан самого елемента, а не його вмісту (за винятком табличних комірок)
- Коли воно застосовується до табличній комірці, то впливає на вміст комірки, а не на саму осередок.
Іншими словами, наступний код не матиме ніякого ефекту:
Чому? Тому що
Правильне використання властивості vertical-align, допоможе вирівняти рядковий елемент щодо інших малих елементів на сторінці. Наскільки високо чи низько розташується елемент по вертикалі, буде залежати від розміру сусідніх малих елементів, або від властивості line-height, заданого для цього рядка.
На зображенні нижче, представлений приклад того, як поводяться рядкові елементи, коли ви застосовуєте властивість vertical-align:
Значення властивості - ключові слова
Властивість vertical-align може набувати таких значень:
Більшість з них вам швидше за все не знадобляться, але завжди добре знати з чого можна вибрати. Наприклад, на демо-сторінці. текстового поля призначено властивість vertical-align: top. завдяки чому, воно вирівняно щодо найвищого елемента в рядку (великий картинки).
А якщо ви не хочете мати у своєму розпорядженні елемент щодо зображень або інших малих елементів, можна використовувати значення text-top або text-bottom. щоб ваш елемент позиціонувався щодо тексту, розташованого в рядку.
Про значення "middle"
На жаль, vertical-align: middle; не буде спонукане рядковий елемент по центру найбільшого елемента в рядку, як цього можна було б очікувати. Замість цього, значення middle розташує елемент щодо гіпотетичної рядкової "x" (також званої "x-заввишки"). По-хорошому, це значення було б назвати "text-middle", для правильної ідентифікації його механізму.
На цій демо-сторінці. розмір тексту спеціально збільшений, щоб ви могли подивитися, як саме вирівнюються елементи, при значенні middle. По всьому виходить, що це значення, вам буде потрібно набагато рідше, ніж інші.
Цифрові значення властивості
Можливо ви не знали, але vertical-align як значення може приймати абсолютні і процентні значення, всі наведені нижче приклади будуть правильними:
У чому різниця між абсолютними значеннями і ключовими словами, можна почитати в CSS-специфікації. або (що на мій погляд набагато корисніше) самостійно спробувати різні варіанти.