Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

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