- Чого воно не робить
- Чим воно є насправді
- кілька картинок
- Ключові слова
- Про ключовому слові middle
- числові значення
- висновок
Наша взаимовыгодная связь 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 може бути розбите на три простих для розуміння правила:
- Воно застосовується тільки до рядковим елементам inline або рядковим блокам inline-block.
- Воно впливає на вирівнювання самого елемента, а не його вмісту (крім випадків, коли застосовується до елементів таблиці).
- Коли воно застосовується до осередку таблиці, вирівнювання впливає на вміст комірки, а не на неї саму.
Іншими словами, наступний код не дасть ніякого ефекту:
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