타이포그래피
vertical-align
인라인 또는 테이블 셀 박스의 수직 정렬을 제어하는 유틸리티입니다.
| 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>; |
예제
기준선 정렬
align-baseline 유틸리티를 사용해 엘리먼트의 기준선을 부모 엘리먼트의 기준선과 맞출 수 있습니다:
<span class="inline-block align-baseline">The quick brown fox...</span>상단 정렬
align-top 유틸리티를 사용하면 엘리먼트와 그 하위 요소들의 상단을 전체 라인의 상단에 맞출 수 있습니다.
<span class="inline-block align-top">The quick brown fox...</span>중앙 정렬
align-middle 유틸리티를 사용하면 엘리먼트의 중앙을 부모 엘리먼트의 기준선(baseline)에 x-height의 절반을 더한 위치에 정렬할 수 있습니다.
<span class="inline-block align-middle">The quick brown fox...</span>하단 정렬
align-bottom 유틸리티를 사용하면 엘리먼트와 그 하위 엘리먼트의 하단을 전체 라인의 하단에 맞출 수 있습니다.
<span class="inline-block align-bottom">The quick brown fox...</span>부모 요소 상단에 정렬하기
align-text-top 유틸리티를 사용하면 엘리먼트의 상단을 부모 엘리먼트의 글꼴 상단과 정렬할 수 있습니다.
<span class="inline-block align-text-top">The quick brown fox...</span>부모 요소 하단에 정렬하기
align-text-bottom 유틸리티를 사용하면 엘리먼트의 하단을 부모 엘리먼트의 글꼴 하단과 정렬할 수 있습니다.
<span class="inline-block align-text-bottom">The quick brown fox...</span>커스텀 값 사용하기
align-[<value>] 구문을 사용하세요 vertical alignment를 완전히 커스텀한 값으로 설정하려면:
<span class="align-[4px] ..."> <!-- ... --></span>CSS 변수를 사용하려면 align-(<custom-property>) 구문을 사용할 수도 있습니다:
<span class="align-(--my-alignment) ..."> <!-- ... --></span>이는 align-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a vertical-align 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<span class="align-middle md:align-top ..."> <!-- ... --></span>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
