[CSS] Baseline (수직 정렬)

Baseline

보통 사람들은 요소의 끝을 baseline이라고 생각하지만, 글자의 바로 밑 라인을 baseline이라고 한다. 크기가 큰 글자와 작은 글자를 두고 보면 아래가 맞춰 있는 모습을 볼 수 있는데 그 선이 baseline이 되는 것이다. 텍스트 뿐만 아니라 이미지, inline 요소도 마찬가지이다.
또한, vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다.

출처: https://infoheap.com/css-inline-block-baseline-alignment/

vertical-align

• inline 요소와 inline-block 요소를 수직 정렬할 때 사용한다.
  • block 요소에는 적용되지 않는다.
• 요소 자체만 정렬하며, 내용에는 영향을 미치지 않는다.
  • table cell에 적용할 때는 제외된다.
• vertical-align은 정렬하려는 요소를 다른 inline 요소에 상대적으로 정렬한다.
  • 같은 줄에서 inline 요소의 크기에 따라 높낮이가 달라질 수 있다.
  • 같은 줄에 있는 line-height 설정에 따라서도 달라질 수 있다.
• 어디에 baseline이 맞춰지는지 알고 싶다면 부모 요소에 텍스트를 입력하여 비교하는 것도 좋다.

값	설명
baseline	기본 값 부모 요소의 baseline에 맞춤 baseline이 없는 요소는 margin 끝을 baseline으로 사용
sub	부모 요소의 아래 첨자 baseline에 맞춤
super	부모 요소의 위 첨자 baseline에 맞춤
text-top	요소의 맨 위를 부모 font의 맨 위에 맞춤
text-bottom	요소의 맨 아래를 부모 font의 맨 아래에 맞춤
top	요소의 윗쪽을 줄에서 가장 높은 요소의 맨 위에 맞춤
middle	부모 요소의 중앙에 맞춤
bottom	요소의 아래쪽을 줄에서 가장 낮은 요소에 맞춤
단위 값 (px, cm 등)	단위 값으로 맞춤 가능
%	line-height의 백분율

table cell 속성 값

값	설명
top	테이블 칸에서 상단 padding을 가롤 줄의 맨 위에 맞춤
middle	테이블 칸에서 padding box를 중앙에 위치
bottom	테이블 칸에서 하단 padding 가로 줄에서 맨 아래에 맞춤

block 요소를 수직 중앙 정렬하는 방법

<div>에 line-height 속성을 적용한 후, vertical-align: middle; 을 적용하면 수직 중앙 정렬이 된다.

*참고: https://aboooks.tistory.com/180