Как расположить элементы вертикально css

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

Легко изменяйте вертикальное выравнивание элементов 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>

С ячейками таблицы:

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.