Các tiện ích để kiểm soát căn chỉnh dọc của một inline hoặc table-cell box.
| Class | Styles |
|---|---|
align-baseline | vertical-align: baseline; |
align-top | vertical-align: top; |
align-middle | vertical-align: middle; |
align-bottom | vertical-align: bottom; |
align-text-top | vertical-align: text-top; |
align-text-bottom | vertical-align: text-bottom; |
align-sub | vertical-align: sub; |
align-super | vertical-align: super; |
align-(<custom-property>) | vertical-align: var(<custom-property>); |
align-[<value>] | vertical-align: <value>; |
Sử dụng tiện ích align-baseline để căn chỉnh đường cơ sở (baseline) của một phần tử với đường cơ sở của phần tử cha của nó:
<span class="inline-block align-baseline">The quick brown fox...</span>Sử dụng tiện ích align-top để căn chỉnh phần trên cùng của một phần tử và các phần tử con của nó với phần trên cùng của toàn bộ dòng:
<span class="inline-block align-top">The quick brown fox...</span>Sử dụng tiện ích align-middle để căn chỉnh phần giữa của một phần tử với đường cơ sở cộng với một nửa chiều cao x của phần tử cha:
<span class="inline-block align-middle">The quick brown fox...</span>Sử dụng tiện ích align-bottom để căn chỉnh phần dưới cùng của một phần tử và các phần tử con của nó với phần dưới cùng của toàn bộ dòng:
<span class="inline-block align-bottom">The quick brown fox...</span>Sử dụng tiện ích align-text-top để căn chỉnh phần trên cùng của một phần tử với phần trên cùng của font chữ của phần tử cha:
<span class="inline-block align-text-top">The quick brown fox...</span>Sử dụng tiện ích align-text-bottom để căn chỉnh phần dưới cùng của một phần tử với phần dưới cùng của font chữ của phần tử cha:
<span class="inline-block align-text-bottom">The quick brown fox...</span>Use the align-[<value>] syntax to set the vertical alignment based on a completely custom value:
<span class="align-[4px] ..."> <!-- ... --></span>For CSS variables, you can also use the align-(<custom-property>) syntax:
<span class="align-(--my-alignment) ..."> <!-- ... --></span>This is just a shorthand for align-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a vertical-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<span class="align-middle md:align-top ..."> <!-- ... --></span>Learn more about using variants in the variants documentation.