vertical-align
박스들이 막 자기 마음대로 배치되어있는거 같지만 각 텍스트의 baseline이 맞추어져 있다
vertical-align 속성을 따로 써주지 않으면 baseline으로 설정되어있다(디폴트)
저 span요소들의 base 라인을 부모요소에 baseline에 맞추라는 뜻이다 따라서
x를 써주면
x의 베이스 라인에 맞춰진다
verticall-align 속성을 직접 설정해줄 수 있다
저 초록박스가 이 줄에서 가장 높은 요소에 위에 맞춰지게 된다 현재줄 가장 높은 요소는 alex가 담겨있는 핑크박스이다
그렇다면 가장 높은 요소인 alex에다가 해주면?
뭔가 많은게 움직였다
지금 alex를 제외하고 가장 큰박스는 chris 이기 때문에 alex의 위와 chris의 위가 맞춰지게 된다
x와 ben은 따로 vertical-align을 설정하지 않았기 때문에 chris의 baseline에 맞춰지게 된다
x ben chris 만 가만히 있고 alex가 내려가서 chris의 위와 맞추면 되지 않느냐?
base라인은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화 시키는 곳에 위치하게 된다 따라서 위처럼 된다
ben이 살짝 내려온다 부모 태그의 container에 있는 x의 중간과 ben의 중간이 맞춰지게 된다
앞으로 vertical-align:middle을 했을 때 어디로 가는지 궁금하다면 x를 써보고 확인해보면 된다
모든요소의 가운데를 맞추고 싶다면
