This page is being translated; the original is shown (Русский ).
Выравнивание по вертикали
Классы задают положение строчного элемента или ячейки таблицы по вертикали:
по базовой линии, верху, середине, низу строки или как верхний и нижний
индекс. Берите их для значков и изображений в тексте и для ячеек таблицы.
Пример
Положение в строке
Квадрат — строчный элемент внутри строки текста. Фон показывает высоту
строки.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-baseline</code >
<p class ="m-0 text-4 bg-primary-container color-on-primary-container" >Строка <span class ="inline-block w-c2 h-c2 bg-primary radius-ui text-baseline" ></span > текста</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-top</code >
<p class ="m-0 text-4 bg-primary-container color-on-primary-container" >Строка <span class ="inline-block w-c2 h-c2 bg-primary radius-ui text-top" ></span > текста</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-middle</code >
<p class ="m-0 text-4 bg-primary-container color-on-primary-container" >Строка <span class ="inline-block w-c2 h-c2 bg-primary radius-ui text-middle" ></span > текста</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-bottom</code >
<p class ="m-0 text-4 bg-primary-container color-on-primary-container" >Строка <span class ="inline-block w-c2 h-c2 bg-primary radius-ui text-bottom" ></span > текста</p >
</div >
</div >
Индексы
text-sup и text-sub поднимают и опускают элемент, как верхний и нижний
индекс.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-sup</code >
<p class ="m-0 text-3" >E = mc<span class ="text-sup text-1/2" >2</span ></p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >text-sub</code >
<p class ="m-0 text-3" >H<span class ="text-sub text-1/2" >2</span >O</p >
</div >
</div >
Классы
Класс
CSS
Значения
text-baselinevertical-align: baseline—
text-topvertical-align: top—
text-middlevertical-align: middle—
text-bottomvertical-align: bottom—
text-supvertical-align: super—
text-subvertical-align: sub—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Класс ставят на сам строчный элемент, а не на родителя:
HTML wrap_text Wrap source lines content_copy Copy
<p >Сохранено <span class ="sf-icon text-middle" aria-hidden ="true" >check</span ></p >
<td class ="text-top" >Ячейка, прижатая к верху строки таблицы</td >
Для смысловых индексов — формул, единиц измерения — пишите теги sup и
sub. text-sup и text-sub нужны, когда индекс только оформление.
Ограничения
Классы действуют на строчные элементы и ячейки таблицы. Блоки во флекс- и
грид-контейнере выравнивают классы items-* и self-*.
text-sup и text-sub не уменьшают текст: добавьте text-1/2.У семейства нет префиксов ширины экрана и состояний.
См. также
Предыдущая Размер заголовков Следующая Обработка пробелов
