Выравнивание по вертикали

vertical-align

В SIMAI Framework с помощью модификаторов вы можете выравнить строчные (inline) элементы по вертикали.

Классы

Класс Значение
text-baseline vertical-align: baseline;
text-top vertical-align: top;
textext-middle vertical-align: middle;
text-bottom vertical-align: bottom;
text-sup vertical-align: super;
text-sub vertical-align: sub;

Описание

Адаптивный модификатор. Выравнивает по вертикали строковые элементы.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Принимает значения:
    • text-baseline – выравнивает базовую линию элемента с базовой линией родительского элемента;
    • text-top – выравнивает верхний край элемента и его потомков с верхним краем всей строки;
    • textext-middle – выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height);
    • text-bottom – выравнивает нижний край элемента и его потомков с нижним краем всей строки;
    • text-sup – выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя;
    • text-sub – выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.

Пример

Используйте модификаторы вертикального выравнивания для размещения строчных элементов по вертикали.

По базовой линии

Модификаторо text-baseline выравнивает базовую линию элемента с базовой линией родителя.

Your Text 
<span class="inline-block text-baseline ...">Your Text</span>

По верхнему краю

Модификаторо text-top выравнивает верхний край элемента и его потомков с верхним краем всей строки.

Your Text 
<span class="inline-block text-top ...">Your Text</span>

По середине

Модификаторо textext-middle выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).

Your Text 
<span class="inline-block textext-middle ...">Your Text</span>

По нижнему краю

Модификаторо text-bottom выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Your Text 
<span class="inline-block text-bottom ...">Your Text</span>

Верхний индекс

Модификаторо text-sup выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.

Используется для отображения верхнего индекса:

Your Text sup index 
<span class="text-sup ...">sup index</span>

Нижний индекс

Модификаторо text-sup выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.

Используется для отображения нижнего индекса:

Your Text sub index 
<span class="text-sub ...">sub index</span>

Изменить статью