Langkau ke kandungan utama Langkau ke navigasi dokumen
in English

Penjajaran menegak

Tukar penjajaran menegak elemen sel sebaris, sebaris, jadual sebaris dan sel jadual dengan mudah.

Tukar penjajaran elemen dengan vertical-alignmentutiliti. Sila ambil perhatian bahawa penjajaran menegak hanya mempengaruhi elemen sel sebaris, blok sebaris, jadual sebaris dan sel jadual.

Pilih daripada .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, dan .align-text-topmengikut keperluan.

Untuk memusatkan kandungan bukan sebaris secara menegak (seperti <div>s dan banyak lagi), gunakan utiliti kotak fleksibel kami .

Dengan elemen sebaris:

garis dasar atas tengah bawah teks-atas teks-bawah
<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>

Dengan sel jadual:

garis dasar atas tengah bawah atas teks bahagian bawah teks
<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>

Sass

API Utiliti

Utiliti penjajaran menegak diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

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