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
- 다음과 같이 사용할 수 있다.
span { vertical-align: top; }
Sample
