/images/white/buttonHelp.gif){kind=small}
/images/white/iconAllTags.gif){kind=small}
Vertical-Align
개요 : 이 속성은 요소의 베이스라인을 행 높이를 기준으로 수직 정렬한다.
정의
vertical - align | 설명 |
값 | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율> | <길이> | inherit |
기본값 | baseline |
적용대상 | 인라인 요소와 테이블 셀 요소 |
상속 | 안됨 |
백분율 | 자신의 line-height 를 참조 |
미디어 | visual |
값
값 | 설명 |
<길이> | 길이를 지정한다. '0'은 'baseline'과 같다 |
<백분율> | 백분율(%)값을 지정한다. 'line-height'를 기준으로 계산되며, '0(%)'는 'baseline' 과 같다. |
baseline | 기준선에 정렬하도록 지정한다. |
middle | 가운데 정렬하도록 지정한다. |
sub | 아래첨자 위치로 정렬하도록 지정한다. |
super | 위첨자 위치로 정렬하도록 지정한다. |
text-top | 글자 맨위에 정렬하도록 지정한다. |
text-bottom | 글자 맨 아래에 정렬하도록 지정한다. |
top | 맨 위에 정렬하도록 지정한다. |
bottom | 맨아래에 정렬하도록 지정한다. |
inherit | 부모 요소의 값을 상속하도록 지정한다. |
- 이 속성은 인라인 요소에서 수직 정렬을 지정한다.
- text-top, text-bottom 이 외의 값은 line-height를 기준으로 정렬한다.
- 이 속성은 테이블 셀 요소에서 조금 다르게 출력 된다.
-----------------------------------------------------------------------------------------------------------------------------------------
예제
View Source :
<style>
img {vertical-align: middle;}
</style>
<body>
<p>이미지를 텍스트와 수직으로 가운데 정렬한다. <img src="/docs/files/css/Vertical-align/openWeek.gif" alt="테스트 이미지" /></p> </body>
Result :
-----------------------------------------------------------------------------------------------------
View Source :
<style> img {vertical-align: top;} </style> <body> <p>이미지를 텍스트와 수직으로 위에 정렬한다.<img src="/docs/files/css/Vertical-align/openWeek.gif" alt="테스트 이미지" /></p> </body>Result :
