[TIL]Baseline, vertical-align, 가로 가운데 정렬

baseline

html에서 모든요소는 박스이다. 박스끼리는 baseline이라는 보이지않는 어떤 선에 맞쳐져있다. 즉, 텍스트는 baseline에 맞춰져 있다. 참고로 이미지의 baseline은 맨 밑이다.
inline-block의 경우에는 inline-block의 마지막줄의 baseline이 이요소의 baseline으로 설정된다. 예외 2가지, inline-block요소안에 줄이 하나도 없는 경우 baseline은 그냥 박스의 밑으로 설정,박스가 작아져도 마지막줄에 맞추는데 overflow설정을 scroll이나hidden으로 해주면 박스의 밑부분이 baseline으로 설정됨.

vertical-align

vertical-align:top;은 그요소를 제외하고 이 줄에서 가장 높은 요소의 위에 맞춰지게된다.
baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다.
vertical-align:middle;은 부모태그의 소문자x의 가운데와 박스의 가운데가 맞춰진다.

가운데 정렬

가로 가운데 정렬

inline 또는 inline-block 요소면 부모 태그에 text-align:center; 을 써주면됨
block 요소는 margin-left:auto; margin:right:auto; 를 써주면됨.

세로 가운데 정렬

1. 가짜요소 더하기

2. line-height 로 해결