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ử trong dòng, trong dòng-khối, trong 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

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

<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

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