Вертикальное выравнивание
Легко изменяйте вертикальное выравнивание элементов inline, inline-block, inline-table и table cell.
Измените выравнивание элементов с помощью утилит vertical-alignment . Обратите внимание, что vertical-align влияет только на элементы inline, inline-block, inline-table и table cell elements.
При необходимости выберите .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom и .align-text-top .
Чтобы вертикально центрировать невстроенный контент (например и другие), используйте наши утилиты flexbox.
Со строчными элементами:
baseline top middle bottom text-top text-bottom
span class="align-baseline">baselinespan> span class="align-top">topspan> span class="align-middle">middlespan> span class="align-bottom">bottomspan> span class="align-text-top">text-topspan> span class="align-text-bottom">text-bottomspan>С ячейками таблицы:
| baseline | top | middle | bottom | text-top | text-bottom |
table style="height: 100px;"> tbody> tr> td class="align-baseline">baselinetd> td class="align-top">toptd> td class="align-middle">middletd> td class="align-bottom">bottomtd> td class="align-text-top">text-toptd> td class="align-text-bottom">text-bottomtd> tr> tbody> table>Sass
API утилит
Утилиты вертикального выравнивания указаны в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.
"align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ),
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.