8-6-1. CSS 속성 : 텍스트-수직정렬(vertical-align) {vertical-align: baseline / sub / super / text-top/ text-bottom / middle / top / bottom / px / em / %;}

8-6-1. CSS 속성 : 텍스트-수직정렬(vertical-align)

 

 가. vertical-align 속성

 

  - 요소의 텍스트를 '수직(높이) 정렬'하는 속성

  - 단, <div>, <p>와 같은 block 요소가 아닌 inline 요소 또는 inline-block 요소에서만 사용 가능

  - 주로 inline 요소 및 테이블 셀 상자의 수직(높이)정렬을 지정

  - 대부분, 부모요소에 상대적으로 정렬됨

  - 기본값 : baseline(x의 하단라인)

 

 나. vertical-align 속성값의 종류

  

  ▣ 키워드 형태의 속성값

 

   ㆍbaseline : 부모의 기본 값으로, 영문소문자 x의 하단 라인을 의미 

   ㆍsub : 부모 아래 첨자 기준으로 정렬

   ㆍsuper : 부모 위 첨자 기준으로 정렬

   ㆍtext-top : 부모 텍스트의 맨 위(Ascender 제외)

   ㆍtext-bottom : 부모 텍스트의 맨 아래(Descender 제외)

   ㆍmiddle : 부모 중앙에 위치

   ㆍtop : 부모 맨 위 위치

   ㆍbottom : 부모 맨 아래 위치

 

  ▣ 고정단위 형태의 속성값

 

   ㆍpx : baseline 기준으로 올리거나 내려서 이동하며, 음수 값도 사용 가능

   ㆍem

 

  ▣ 백분율 형태의 속성값

 

   ㆍ% : line-height 기준 내에서 이동하며, 음수 값도 사용 가능