Vertical-align 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소의 베이스라인을 행 높이를 기준으로 수직 정렬한다.

edit

정의

Vertical-align설명
값baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율> | <길이> | inherit
기본값baseline
적용대상인라인? 요소와 테이블(table) 셀 요소
상속안됨
백분율자신의 line-height를 참조
미디어visual

edit

값

값설명
<길이>길이를 지정한다. '0'은 'baseline'과 같다.
<백분율>백분율(%) 값을 지정한다. 'line-height'를 기준으로 계산되며, '0(%)'는 'baseline'과 같다.
baseline기준선에 정렬하도록 지정한다.
middle가운데 정렬하도록 지정한다.
sub아래첨자 위치로 정렬하도록 지정한다.
super위첨자 위치로 정렬하도록 지정한다.
text-top글자 맨위에 정렬하도록 지정한다.
text-bottom글자 맨 아래에 정렬하도록 지정한다.
top맨위에 정렬하도록 지정한다.
bottom맨아래에 정렬하도록 지정한다.
inherit부모 요소의 값을 상속하도록 지정한다.
  • 이 속성은 인라인 요소에서 수직 정렬을 지정한다.
  • text-top, text-bottom 이외의 값은 line-height를 기준으로 정렬한다.
  • 이 속성은 테이블 셀 요소에서 조금 다르체 출력된다.

edit

예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	img {vertical-align: middle;}
</style>
</head>
<body>
	<p>이미지를 텍스트와 수직으로 가운데 정렬한다. <img src="/docs/files/Css/Vertical-align/openWeek.gif" alt="테스트 이미지" /></p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	img {vertical-align: top;}
</style>
</head>
<body>
	<p>이미지를 텍스트와 수직으로 위에 정렬한다. <img src="/docs/files/Css/Vertical-align/openWeek.gif" alt="테스트 이미지" /></p>
</body>
</html>

edit

브라우저 호환성

값IE6IE7FF2Op9
baseline지원지원지원지원
sub불안정불안정지원지원
super불안정불안정지원지원
top불안정불안정지원지원
text-top불안정불안정지원지원
middle지원지원지원지원
bottom불안정불안정지원지원
text-bottom불안정불안정지원지원
(Percentage)불안정불안정지원지원
(Length)불안정불안정지원지원
inherit미지원미지원지원지원

Wiki Trail: < white-space | 문서 목록 | word-spacing >

 
Be Friend~! Be Friend~!