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 :
21.PNG?type=w1
-----------------------------------------------------------------------------------------------------
View Source :
<style>
 img {vertical-align: top;}
</style>
<body>
 <p>이미지를 텍스트와 수직으로 위에 정렬한다. 
<img src="/docs/files/css/Vertical-align/openWeek.gif" alt="테스트 이미지" /></p>
</body>
Result :
22.PNG?type=w1