Розбираємося з vertical-align

1. Чого воно не робить
2. Чим воно є насправді
3. кілька картинок
4. Ключові слова
5. Про ключовому слові middle
6. числові значення
7. висновок

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

«Знову vertical-align не працює!» - зітхне веб-розробник.

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

У цій статті я постараюся в зрозумілій формі розповісти про цю властивість.

Чого воно не робить

Поширена помилка про vertical-align полягає в тому, що застосовуючи до одного елементу, воно змушує всі елементи всередині нього змінити свою вертикальну позицію. Наприклад, коли елементу поставлено vertical-align: top, це має на увазі, що його вміст підніметься до його ж верхній межі.

Пригадуються часи, коли ми робили розкладки на основі таблиць:

<Td valign = "top"> Що-небудь ... </ td>

В даному прикладі з осередком таблиці використання властивості valign (в даний час виключеного з HTML5 ) Призведе до того, що елементи всередині осередку пригорнуться до її верху. І природно, коли верстальники починають використовувати vertical-align, вони думають, що вийде те ж саме, і вміст елемента вирівняється відповідно до значення властивості.

Але vertical-align працює не так.

Чим воно є насправді

Використання властивості vertical-align може бути розбите на три простих для розуміння правила:

1. Воно застосовується тільки до рядковим елементам inline або рядковим блокам inline-block.
2. Воно впливає на вирівнювання самого елемента, а не його вмісту (крім випадків, коли застосовується до елементів таблиці).
3. Коли воно застосовується до осередку таблиці, вирівнювання впливає на вміст комірки, а не на неї саму.

Іншими словами, наступний код не дасть ніякого ефекту:

div {vertical-align: middle; / * Цей рядок марна * /}

Чому? Тому що <div> - це не рядковий елемент і навіть не рядковий блок. Звичайно, якщо ви зробите його рядковим або рядковим блоком, то застосування vertical-align дасть бажаний ефект.

З іншого боку, при правильному застосуванні (до строчному елементу або строчному блоку), властивість vertical-align змусить поточний елемент вирівнятися щодо інших малих елементів.

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

кілька картинок

Ось картинка з пояснювальним текстом, яка допоможе вам зрозуміти, що відбувається при вертикальному вирівнюванні малих елементів:

А ось приклад , В якому є кілька малих елементів, один з яких притиснутий до верху.

Ключові слова

Кілька ключових слів, які можна задавати як значення для властивості vertical-align:

• baseline, значення за замовчуванням або «початкове»
• bottom
• middle
• sub
• super
• text-bottom
• text-top
• top

Можливо, багато хто з них ви не будете використовувати, але було б непогано знати всі наявні варіанти. наприклад, на демо-сторінці , Через те що значення vertical-align для <input> встановлено як top, він вирівняний за найвищим елементу в рядку (великій картинці).

Однак якщо ви не хочете вирівнювати елемент щодо картинок або інших малих елементів, що володіють блоковими властивостями, ви можете вибрати значення text-top або text-bottom, тоді елементи будуть вирівнюватися щодо тексту в рядку.

Про ключовому слові middle

На жаль, правило vertical-align: middle НЕ вирівняє рядковий елемент по середині найвищого елемента в рядку (як ви, можливо, очікували). Замість цього значення middle змусить елемент вирівнятися по середині висоти гіпотетичної малої літери «x» (так само званої x-height). Тому, мені здається, що це значення насправді має називатися text-middle, щоб стало зрозуміло, якою буде результат.

Погляньте на приклад , Де я збільшив розмір шрифту так, щоб розмір x-height став набагато більше. Після цього стане зрозуміло, що значення middle не вийде використовувати дуже часто.

числові значення

Можливо, ви не знали про те, що vertical-align приймає числові і процентні значення. Однак це так, і ось приклади їх використання:

input {vertical-align: 100px; } Span {vertical-align: 50%; } Img {vertical-align: -300px; }

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

висновок

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

Властивість vertical-align працює тільки з малими елементами або малими блоками і елементами таблиці. У разі застосування ні до клітинок таблиці, воно діє на сам елемент, а не на його вміст.

Переклад оригінальної статті « Understanding CSS's vertical-align Property » Луїса Лазаріса (Louis Lazaris), опублікованій на сайті « Impressive Webs ».

Переклад виконав Андрій мотошини .

Теги: css