[CSS] vertical-align / middle 제대로 적용되는 조건

한 줄에 있는 글자들의 폰트가 달라 수직 정렬이 달라지는 경우가 생겼다.

그래서 vertical-align을 이용해 맞춰보려고 했는데 잘 안 되었고...

개발자 툴에서 여러 개의 속성을 적용하며 때려맞췄다.

 

이번엔 제대로 공부해서 알아보자!

 

1 vertical-align 이란?

---

인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다. 

 

2 vertical-align의 특징

---

- inline이나 inline-block 요소에만 적용된다.(table-cell box에서 수직 정렬을 지정한다.)

- vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬한다.

- 대부분의 브라우저에서 작동한다. 

 

3 vertical-align 속성

---

See the Pen by yanggjoy (@yanggjoy) on CodePen.

baseline

부모의 basiline에 맞추어 해당 엘리먼트의 basiline을 정렬한다.

 

sub

해당 엘리먼트의 basiline을 부모의 subscript-baseline으로 정렬한다.

 

super

해당 엘리먼트의 basiline을 부모의 superscript-baseline으로 정렬한다.

 

text-top

해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬한다.

 

text-bottom

해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬한다.

 

middle

해당 엘리먼트의 middle을 부모의 baseline + x-height/2로 정렬한다.

 

top

해당 엘리먼트의 top과 이것의 저손들의 top을 전체 라인의 top으로 정렬한다.

 

bottom

해당 엘리먼트의 bottom과 이것들 자손들의 bottom을 전체라인의 bottom으로 정렬한다.

 

<length>

해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬한다.

 

 

top, middle. bottom, length 가 잘 사용되는 듯,

특히 length 를 이용해  같은 줄에 있는 글자 중 하나만 수직 정렬 원하는대로 변경하기 쉬워서 좋은 것 같다.

 

그리고 middle 같은 경우는 저렇게 두 요소가 있는데 하나만 vertical-align을 주면

가운데 정렬되지 않고 이상하게 위치된다.

 

4 middle속성 조건

---

See the Pen by yanggjoy (@yanggjoy) on CodePen.

적용시키고자 하는 요소가 있다면 그 주변의 요소들도 모두 인라인으로 잡아

같이 vertical-align :middle 을 적용시켜줘야

수직 가운데 정렬이 제대로 된다.