[CSS] Vertical-align 에 대해서

vertical-align 속성이란 ?

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN

문서를 참고하면 vertical-align CSS 속성은 inline 또는 table-cell box 에서의 수직 정렬을 지정한다고 나와있다

inline, inline-box 속성 에서의 세로 정렬을 위한 속성 이라고 생각하면 된다

위 예제는 인라인요소 2개를 놔두고 vertical-align 속성이 없을 때고 (구분선은 그림판으로 넣은 것)
임의로 그린 baseline 에 맞춰 정렬 되있다는 것을 보여준다

See the Pen Untitled by wonhyeonglee (@bigfile57) on CodePen.

 

 

 

vertical-align : baseline -> 위 사진처럼 baseline 따라 정렬한다

vertical-align : top

vertical-align : top  → 해당 엘리먼트의 top을 부모엘리먼트 폰트의 top 으로 정렬한다

여기서 자세히 보면 2번째 문구가 상하 여백이 다른걸 볼 수 있는데
이건 폰트 자체의 여백이라 수정을 하려면 폰트프로그램을 이용해야한다
그래서 보통 우회적인 방법으로 padding 으로 조절을 하고 display : inline-block 적용 해준다고 한다

padding : 0.1em 0 0.2em; display : inline-block

vertical-align : middle -> 부모의 baseline + x-height(소문자의 높이) / 2 로 정렬한다
전체의 가운데 정렬이 아니라 text-middle 이므로 착각하지 말자
중요한 점은 폰트, 브라우저의 종류, 한글과 영어의 차이로 정렬이 유지되지 않을 수 있다
그래서 유동성이 비교적 적은 top 으로 정렬을 하고 margin-top 을 적용해 주는것과
부모에 table 속성을 주고 자식에 display : table-cell ,vertical-align:middle 을 적용하는 등
여러가지 방법이 있는것 같은데 많이 실습해보고 다른 페이지들을 참고해보면서 적재적소에 맞는 방법을 찾는게 답

vertical-align : middle (바로 위에서 적용한 padding , inline-block 주석처리함)

vertical-align : bottom -> 부모 요소 폰트의 bottom 으로 정렬한다