Перейти до основного вмісту Перейти до навігації документами
in English

Вертикальне вирівнювання

Легко змінюйте вертикальне вирівнювання вбудованих елементів, елементів вбудованого блоку, вбудованої таблиці та клітинок таблиці.

Зміна вирівнювання елементів за допомогою vertical-alignmentутиліт. Зауважте, що вертикальне вирівнювання впливає лише на елементи inline, inline-block, inline-table і клітинки таблиці.

Вибирайте з .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottomі .align-text-topза потреби.

Щоб вертикально відцентрувати невбудований вміст (наприклад <div>, s тощо), скористайтеся нашими утилітами flex box .

З вбудованими елементами:

базова лінія зверху посередині знизу текст-верх текст-низ
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

З клітинками таблиці:

базова лінія зверху середина дно текст-верх текст-знизу
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Сасс

API утиліт

Утиліти вертикального вирівнювання оголошено в нашому API утиліт у scss/_utilities.scss. Дізнайтеся, як використовувати API утиліт.

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),