[CSS] 수직정렬(vertical-align) - inline, inline-block 요소끼리 수직 정렬(동일행 정렬)

텍스트 또는 이미지를 수직으로 정렬하는 속성으로 vertical-align 속성을 사용한다.

block요소에서는  사용이 불가하며 inline과 inline-block에서만 사용가능한 속성이다. 

왜냐하면 vertical-align은 행 방향으로 나열된 요소들을 수직정렬하는 속성이기 때문이다.

즉 inline과 inline-block 소형제 태그끼리 수직정렬하는 속성이다.

그래서 줄바꿈을하는 <div>태그에는 사용이 불가하다. 

vertical-align속성의 값들은 다음과 같다.

/* keyword values */

vertical-align: baseline; => 부모요소 기준 정렬

vertical-align: sub; =>아래첨자 기준 정렬

vertical-align: super; => 위첨자 기준 정렬

vertical-align: text-top; => 요소 상단을 부모 font의 상단에 맞춰 정렬

vertical-align: text-bottom; => 요소 하단을 부모 font의 상단에 맞춰 정렬

vertical-align: middle; => 부모 요소의 중앙에 맞춰 정렬

vertical-align: top; => 부모 요소의 상단에 맞춰 정렬

vertical-align: bottom; => 부모 요소의 하단에 맞춰 정렬

/* <length> values */

vertical-align: 10em;

vertical-align: 4px; => 0px은 baseline과 같은 값이다. 0px을 기준으로 위 아래로 위치를 조절

/* <percentage> values */

vertical-align: 20%; => 0%는 baseline과 같은 값이다. 0을 기준으로 위 아래로 위치를 조절

/* Global values */

vertical-align: inherit; 부모 요소로부터 해당 속성의 계산값을 받아 사용

vertical-align: initial; initial 키워드 속성의 초기값(기본값)을 적용(초깃값은 브라우저가 지정)

vertical-align: unset; 부모요소로부터 상속할 값이 존재하면 상속값, 그렇지 않다면 초깃값 사용