Căn chỉnh theo chiều dọc

Dễ dàng thay đổi căn chỉnh theo chiều dọc của các phần tử ô nội tuyến, khối nội tuyến, bảng nội tuyến và bảng.

Thay đổi sự liên kết của các phần tử với các vertical-alignmenttiện ích. Xin lưu ý rằng căn chỉnh theo chiều dọc chỉ ảnh hưởng đến các phần tử nội tuyến, khối nội tuyến, bảng nội dòng và ô bảng.

Chọn từ .align-baseline,, .align-topvà nếu cần .align-middle..align-bottom.align-text-bottom.align-text-top

Để căn giữa theo chiều dọc nội dung không phải trong dòng (như <div>s và hơn thế nữa), hãy sử dụng các tiện ích hộp linh hoạt của chúng tôi .

Với các phần tử nội tuyến:

đường cơ sở trên cùng giữa dưới cùng văn bản trên cùng văn bản-dưới cùng

html

<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>

Với các ô trong bảng:

đường cơ sở

đứng đầu

ở giữa

đáy

text-top

văn bản dưới cùng

html

<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 tiện ích

Các tiện ích căn chỉnh theo chiều dọc được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

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