vertical-align
인라인 요소나 테이블 셀의 수직 정렬을 제어합니다. inline, inline-block, table-cell 요소에서만 동작하며, 블록 요소에는 적용되지 않습니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
vat | vertical-align: top | 라인 박스 상단에 정렬 |
vam | vertical-align: middle | 부모 baseline + x-height/2 위치에 정렬 |
vab | vertical-align: bottom | 라인 박스 하단에 정렬 |
vabl | vertical-align: baseline | 부모의 baseline에 맞춤 (기본값) |
vasb | vertical-align: sub | 아래 첨자 위치에 정렬 |
vasp | vertical-align: super | 위 첨자 위치에 정렬 |
vatb | vertical-align: text-bottom | 부모 폰트의 text-bottom에 맞춤 |
vatt | vertical-align: text-top | 부모 폰트의 text-top에 맞춤 |
vau | vertical-align: unset | 초기값으로 리셋 |
시각적 비교
각 vertical-align 값이 인라인 요소에 어떤 영향을 주는지 비교합니다. 큰 텍스트 옆에 작은 요소를 배치하여 차이를 확인하세요.
Top — vat
Middle — vam
Bottom — vab
Baseline (기본값) — vabl
Sub — vasb
Super — vasp
언제 뭘 쓸까?
| 상황 | 추천 | 이유 |
|---|---|---|
| 테이블 셀 상단 정렬 | vat | 셀 콘텐츠를 위쪽에 붙임 |
| 아이콘 + 텍스트 인라인 정렬 | vam | 인라인 컨텍스트에서 수직 중앙 |
| 이미지와 텍스트 정렬 | vam | 이미지 하단 여백 제거 |
| 화학식 아래 첨자 | vasb | H₂O 같은 표현 |
| 각주 위 첨자 | vasp | 참조 번호 표현 |
클래스별 상세
vatvertical-align: top
요소의 상단을 라인 박스의 상단에 맞춥니다. 테이블 셀에서 콘텐츠를 상단 정렬할 때 자주 사용합니다.
<!-- 테이블 셀 상단 정렬 -->
<div class="dt w100p">
<div class="dtc vat p16px bg18181B">짧은 내용</div>
<div class="dtc vat p16px bg27272A">긴 내용이 여러 줄로
이어지는 경우에도
상단에 맞춰 정렬됩니다</div>
</div>vamvertical-align: middle
요소를 부모의 baseline + x-height의 절반 위치에 맞춥니다. 인라인 컨텍스트에서 아이콘과 텍스트를 수직 정렬할 때 유용합니다.
<!-- 아이콘 + 텍스트 인라인 정렬 -->
<p>
설정
<img class="vam" src="/icon.svg" width="16" height="16" />
완료되었습니다
</p>주의
vam은 완벽한 중앙 정렬이 아닙니다. 정확한 수직 중앙 정렬이 필요하면 df aic를 사용하세요.
vabvertical-align: bottom
요소의 하단을 라인 박스의 하단에 맞춥니다.
<!-- 하단 정렬 -->
<p class="fs3-2rem">
큰 텍스트 <span class="vab fs14px c71717A">하단 정렬</span>
</p>vablvertical-align: baseline
기본값입니다. 요소의 baseline을 부모의 baseline에 맞춥니다. 텍스트와 인라인 요소가 자연스럽게 정렬됩니다.
<!-- 기본 baseline 정렬 -->
<p class="fs3-2rem">
큰 텍스트 <span class="vabl fs14px c71717A">baseline</span>
</p>vasbvertical-align: sub
요소를 부모의 아래 첨자(subscript) 위치에 맞춥니다. 화학식 등에서 사용합니다.
<!-- 아래 첨자 (화학식) -->
<p class="fs2rem">
H<span class="vasb fs14px">2</span>O
CO<span class="vasb fs14px">2</span>
</p>vaspvertical-align: super
요소를 부모의 위 첨자(superscript) 위치에 맞춥니다. 각주, 지수 표현 등에 사용합니다.
<!-- 위 첨자 (각주) -->
<p class="fs16px">
이 문장에는 각주가 있습니다<span class="vasp fs12px c6366F1">[1]</span>
</p>vatbvertical-align: text-bottom
요소의 하단을 부모 폰트의 text-bottom에 맞춥니다.
<!-- text-bottom 정렬 -->
<p class="fs3-2rem">
큰 텍스트 <span class="vatb fs14px c71717A">text-bottom</span>
</p>vattvertical-align: text-top
요소의 상단을 부모 폰트의 text-top에 맞춥니다.
<!-- text-top 정렬 -->
<p class="fs3-2rem">
큰 텍스트 <span class="vatt fs14px c71717A">text-top</span>
</p>vauvertical-align: unset
vertical-align을 초기값으로 되돌립니다. 상속된 값을 리셋할 때 사용합니다.
<!-- 상속된 값 리셋 -->
<span class="vau">vertical-align 초기화</span>팁 & 주의사항
블록 요소에는 동작하지 않음
vertical-align은 inline, inline-block, table-cell 요소에서만 동작합니다. 블록 요소의 수직 정렬에는 df aic를 사용하세요.
아이콘 + 텍스트 정렬
인라인 컨텍스트에서 아이콘과 텍스트를 맞추려면 vam을 양쪽에 적용하세요. 더 정확한 정렬이 필요하면 dif aic를 사용하세요.