CSS 참조 설명서

CSS @규칙(RULES)

vertical-align CSS 속성이 제어합니다인라인 레벨의요소(보통 텍스트와 이미지)가 생성하는 상자는 다음과 같습니다:블록 레벨텍스트의 텍스트 라인 기준 또는 한 줄의 테이블 셀의 수직 정렬

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 나타냅니다.

기본 값:	baseline
적용:	인라인 레벨과 테이블 셀 요소
thừa kế:	없음
애니메이션 가능:	네.참조해 주세요 애니메이션 속성。
버전:	CSS 1，2，3
JavaScript 문법:	object.style.verticalAlign="middle"

이 속성의 문법은 다음과 같습니다：

vertical-align:　baseline　|　sub　|　super　|　top　|　text-top　|　middle　|　bottom　|　text-bottom　|　length　|　percentage　|　initial　|　inherit

다음 예제는 vertical-align 속성。

예제

　　img　{
　　　vertical-align:　middle;
　　}
　　span　{
　　　vertical-align:　super;
　　}

아래 표는 이 속성의 값을 설명합니다。

값	설명
baseline	요소 상자의 기본선을 부모 상자의 기본선과 정렬합니다。
sub	상자의 기본선을 부모 상자의 하표 위치에 맞게 낮추습니다。
super	상자의 기본선을 부모 상자의 상표 위치에 맞게 높입니다。
top	요소의 상단 및 자손을 레이아웃의 상단과 정렬합니다。
text-top	요소의 상단을 부모 요소의 글꼴의 상단과 정렬합니다。
middle	요소의 중앙을 부모 요소의 기본선보다 높은 부모 상자의 기본선과 정렬합니다。x-height반점의 절반에 정렬합니다。
bottom	요소의 하단 및 자손을 레이아웃의 하단과 정렬합니다。
text-bottom	요소의 하단을 부모 요소의 글꼴의 하단과 정렬합니다。
length	px, pt, cm, em 등의 단위로 됩니다. 길이 값은 부모 요소의 기본선에 대한 이 거리로 증가(양수) 또는 감소(음수)합니다. 값 0px는 기본선과 동일합니다。
percentage	이 거리를 (양수로) 높이거나 (음수로) 낮추기 위해 상자를 올리거나 내려줍니다（line-height백분율 값）。 값 0％는 기본선과 동일합니다。。
initial	이 속성을 기본 값으로 설정합니다。
inherit	지정된 경우, 관련 요소는 부모 요소의 vertical-align 속성 값.

vertical-align 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	파이어폭스 1+ 구글 크롬1+ 인터넷 익스플로러 4+ 애플 사파리 1+ 오페라 4+

다음 튜토리얼을 참조하세요:CSS 정렬。