loader

Cвойство vertical-align задает вертикальное выравнивание элемента. Для простого текста это не особо актуально, то вот для строчно-блочных (inline-block) элементов это свойство может быть очень полезным. Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.

vertical-align հատկությունը սահմանում է տարրի հավասարեցումը ուղղահայաց ուղղությամբ: Պարզ տեքստի համար սա առանձնապես կարևոր չէ, բայց inline-block տարրերի համար այս հատկությունը կարող է շատ օգտակար լինել: Այս հատկությունը օգտակար է, երբ անհրաժեշտ է պատկերը կամ emoji-ն համապատասխանեցնել տեքստին:

Синтаксис

Գրելաձև

vertical-align: baseline; ⟿ Выравниваемый элемент выстраивается по нижней линии текста.
vertical-align: middle; ⟿ Элемент выравнивается по центру.
vertical-align: text-top; ⟿ Верхняя часть элемента выравнивается по верхнему краю родителя
vertical-align: text-bottom; ⟿ Выравнивает элемент по нижней точке текста с учётом выносных элементов.
vertical-align: sub; ⟿ Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса.
vertical-align: super; ⟿ Работает почти как sub, только поднимает базовую линию вверх.
vertical-align: top; ⟿ Верхняя граница элемента находится на уровне верхней границы строки.
vertical-align: bottom; ⟿ Выравнивает нижнюю границу элемента по уровню нижней границы строки.
vertical-align: baseline; ⟿ Հավասարեցման տարրը համընկնում է տեքստի ստորին տողի հետ.
vertical-align: middle; ⟿ Տարրը կենտրոնացվում է.
vertical-align: text-top; ⟿ Տարրի վերին մասը հավասարեցված է ծնողի վերին մասի հետ
vertical-align: text-bottom; ⟿ Հավասարեցնում է տեքստի ներքևի մասի տարրը՝ հաշվի առնելով իջնողները.
vertical-align: sub; ⟿ Իջեցնում է բազային գիծն այնպես, որ տարրը իջնի մինչև բաժանորդի մակարդակը.
vertical-align: super; ⟿ Աշխատում է գրեթե sub-ի պես, միայն բարձրացնում է ելակետը վերև.
vertical-align: top; ⟿ Տարրի վերին եզրագիծը գտնվում է շարքի վերին եզրագծի մակարդակի վրա.
vertical-align: bottom; ⟿ Հավասարեցնում է տարրի ներքևի մասը տողի ստորին մասի հետ.

Пример

Օրինակ

See the Pen vertical-align by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen vertical-align by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

wbr image

Также у тега vertical-align есть следующие под. теги

Поддержка браузера дляԲրաուզերի աջակցությունը vertical-align элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 6+ 12+ 4+ 2+ 3.1+ 10+
Notes