스타일시트 vertical-align 사용해서 <div> 수직 정렬하기

vertical-align은 inline 또는 table-cell에서 수직 정렬을 지정해주는 css 속성이다. 속성값은 아래와 같다.

 

vertical-align: baseline; 
/* 부모 baseline에 맞추어 해당 요소의 baseline을 정렬 */

vertical-align: sub;
/* 해당 요소의 baseline을 부모의 아래첨자 기준에 맞추어 정렬 */

vertical-align: super;
/* 해당 요소의 baseline을 부모의 위첨자 기준에 맞추어 정렬 */

vertical-align: text-top;
/* 해당 요소 상단을 부모 요소 폰트의 상단에 맞추어 정렬 */

vertical-align: text-bottom;
/* 해당 요소 하단을 부모 요소 폰트의 하단에 맞추어 정렬 */

vertical-align: middle;
/* 해당 요소의 중앙을 부모 요소의 중앙에 정렬 */

vertical-align: top;
/* 해당 요소 상단을 부모 요소의 상단에 맞추어 정렬 */

vertical-align: bottom;
/* 해당 요소 하단을 부모 요소의 하단에 맞추어 정렬 */

vertical-align: <길이>
/* 해당 요소의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬, 음수값이 허용 */

vertical-align: <%>
/* 해당 요소의 baseline을 부모의 baseline에서 line-height의 퍼센트로 주어진 퍼센트만큼 위로 정렬, 음수값이 허용 */

 

★중요★ vertical-align은 오로지 inline(인라인) 요소와 table-cell(테이블 셀) 요소에만 적용된다. block(블락) 요소에는 적용이 되지 않기 때문에 만약 vertical-align을 <div> 요소에 적용하고 싶다면 display:table-cell;을 적용해서 속성을 변경한 후에 사용해야 한다.