Vertical alignment
Vertical alignment (세로 정렬)
inline, inline-block, inline-table, table cell 요소의 세로 정렬을 손쉽게 바꾸는 방법에 대해 알아봅니다.
출처: 문서
본문
vertical-align 유틸리티로 요소의 정렬을 변경할 수 있습니다. vertical-align은 inline, inline-block, inline-table, table cell 요소에만 영향을 준다는 점을 알아두세요.
필요에 따라 .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top 중에서 선택하세요.
inline이 아닌 내용(<div> 같은 것)을 세로 가운데 정렬하려면 flex box 유틸리티를 사용하세요.
inline 요소와 함께:
<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>
table cell과 함께:
<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>
CSS
Sass utilities API
vertical align 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.
scss/_utilities.scss
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),