vertical-alignment 유틸리티를 사용하여 요소의 정렬을 변경합니다. 수직 정렬은 인라인, 인라인 블록, 인라인 테이블 및 테이블 셀 요소에만 영향을 미칩니다.
필요에 따라 .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom 및 .align-text-top 중에서 선택할 수 있습니다.
인라인이 아닌 콘텐츠 (예: <div> 등)를 세로로 가운데에 맞추려면 flexbox 유틸리티를 사용하세요.
인라인 요소를 다음과 같이 사용할 수 있습니다:
baseline
top
middle
bottom
text-top
text-bottom
<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>테이블 셀을 다음과 같이 사용할 수 있습니다:
| baseline | top | middle | bottom | text-top | text-bottom |
<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
수직 정렬 유틸리티는 유틸리티 API의 scss/_utilities.scss에 선언되어 있습니다. 유틸리티 API 사용 방법에 대해 알아보세요.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),