vertical-align

Summary

인라인 엘리먼트나 테이블의 셀 안에서 수직정렬을 지정한다.

값	baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율> | <길이> | inherit
기본값	baseline
적용대상	인라인 블럭과 테이블의 셀 엘리먼트들
상속	상속안됨
퍼센테이지	line-height값을 참조
미디어	Visual

Value

• baseline : 인라인 박스의 베이스라인을 부모박스의 베이스라인에 정렬한다.
• sub : 인라인 박스의 베이스라인을 부모박스의 아래첨자 문자로 적당한 위치로 낮춘다. 글꼴 크기에는 영향을 주지 않는다.
• super : 인라인 박스의 베이스라인을 부모박스의 윗첨자 문자로 적당한 위치로 올린다. 글꼴 크기에는 영향을 주지 않는다.
• top : 인라인 박스의 맨위를 라인박스의 윗변에 정렬한다.
• text-top : 인라인 박스의 맨위를 부모 엘리먼트 글꼴의 맨 위에 정렬한다.
• middle : 인라인 박스의 수직 중간점을 부모박스의 베이스라인에 소문자 'x'높이의 반(1/2)을 올린다.
• bottom : 인라인 박스의 아랫변을 라인 박스의 바닥에 정렬한다.
• text-bottom : 인라인 박스의 맨아래를 부모 엘리먼트 글꼴의 맨 아래에 정렬한다.
• 길이 : 해당길이 만큼 인라인 박스를 올린다. (음수일때는 내린다. ) '0'은 baseline을 의미한다.
• 백분율 : 해당 백분율을 line-height속성 값의 백분율 길이 만큼 올리거나(양수) 내린다(음수).  '0'은 baseline을 의미한다.

Tip

1. 다음과 같이 사용할 수 있다.

   span {
       vertical-align: top;
   }

Sample