테이블 셀 정렬 — vertical-align 완전 정리

 

 

Web Development · HTML Table

테이블 셀 수직 정렬 —
vertical-align: top · bottom · middle

셀 높이가 클 때 안의 텍스트를 어디에 붙일지 결정

시작 오늘 분석할 코드

같은 표 안에 셀 3개가 있고, 각 셀에 다른 vertical-align 값을 주어 텍스트가 셀 안에서 어떤 위치에 붙는지 비교한다.

td { height: 100px; padding: 20px; } .va1 { vertical-align: top; } .va2 { vertical-align: bottom; } .va3 { vertical-align: middle; } <table> <caption>vertical-alignment</caption> <tr> <td class="va1">alignment</td> <td class="va2">alignment</td> <td class="va3">alignment</td> </tr> </table>

실제 출력 미리보기

vertical-alignment

top (위에 붙음)

bottom (아래에 붙음)

middle (가운데)

용어 용어 정리

vertical-align셀·인라인 요소의 세로 정렬

top셀의 위쪽에 붙음

middle셀의 가운데 (td의 기본값)

bottom셀의 아래쪽에 붙음

baseline글자의 기준선에 맞춤

셀 높이 필요td에 height가 있어야 효과 보임

---

1 td의 기본값은 middle

특별히 지정하지 않으면 td는 vertical-align: middle이 기본이다. 일반 div의 기본값(baseline)과 다르다.

※ 그래서 표에서 셀 높이가 다른 경우, 한 행 안의 모든 셀 텍스트가 가운데에 정렬되어 보인다. 명시적으로 top이나 bottom을 줘야 위·아래로 붙는다.

---

2 top vs bottom vs middle

값	위치	언제 쓰나
top	셀 위쪽	각 셀 내용 길이가 다를 때, 위쪽 정렬이 자연스러움
middle	셀 가운데 (기본)	균형 잡힌 표, 짧은 라벨
bottom	셀 아래쪽	가격표·숫자 비교 (자릿수 맞춤)
baseline	글자 기준선 일치	인라인 요소(span, img)에서 주로

반응형

---

3 자주 하는 실수

실수	증상	해결
div에 vertical-align 사용	전혀 적용 안 됨	div는 flex/grid의 align-items 사용
td에 height 없음	vertical-align 차이가 안 보임	td에 명시적 height 또는 행 안 다른 셀이 높음
vertical-align: center	오타 — middle이 정답	vertical-align은 middle, justify-content는 center

---

4 div에서 같은 효과 — flex

div에서는 vertical-align이 안 통한다. flex의 align-items로 대체.

.cell { display: flex; align-items: flex-start; /* top과 같음 */ /* center → middle, flex-end → bottom */ }

---

핵심 한 줄 요약

vertical-aligntd 내 텍스트의 세로 위치

top / middle / bottom위 / 가운데 / 아래

td 기본값middle (일반 div는 baseline)

div에서는?flex의 align-items 사용

center 아님vertical-align은 middle이 정답

Tags

#vertical-align #테이블셀정렬 #td #th #top #middle #bottom #baseline #세로정렬 #align-items #flex #CSS테이블 #박스모델 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

vertical-align, 테이블셀정렬, td, th, top, middle, bottom, baseline, 세로정렬, align-items, flex, CSS테이블, 박스모델, 웹개발, HTML, 티스토리