출처: http://blog.naver.com/pet2r?Redirect=Log&logNo=10110159572
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 :
'CSS' 카테고리의 다른 글
| padding 값과 margin 값에 비교 (0) | 2011.07.26 |
|---|---|
| text-decoration (0) | 2011.07.18 |
| white-space (0) | 2011.07.18 |