[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; ini