CSS 벨리칸-어라인 속성

정의 및 사용법

vertical-align 속성은 요소의 수직 정렬 방식을 설정합니다.

설명

이 속성은 행 내 요소의 기본선이 요소가 있는 행의 기본선에 대한 수직 정렬을 정의합니다. 음수 길이 값과 퍼센트 값을 지정할 수 있습니다. 이는 요소가 상승 대신 하락하게 합니다. 테이블 셀에서, 이 속성은 셀 프레임 안에 셀 내용의 정렬 방식을 설정합니다.

추가로 참조할 수 있는 내용:

CSS 강의:CSS 텍스트

HTML DOM 참조 가이드:verticalAlign 속성

예제

이미지를 세로로 정렬:

img
  {
  vertical-align:text-top;
  }

개인적으로 시도해 보세요

CSS 문법

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

속성 값

값 설명
baseline 기본. 요소는 부모 요소의 기본선에 배치됩니다.
sub 문자의 하위를 아래로 정렬.
super 문자의 상표를 위로 정렬
top 요소의 상단을 행에서 가장 높은 요소의 상단과 맞춥니다
text-top 요소의 상단을 부모 요소의 글꼴의 상단과 맞춥니다
middle 이 요소를 부모 요소의 중앙에 배치합니다.
bottom 요소의 상단을 행에서 가장 낮은 요소의 상단과 맞춥니다.
text-bottom 요소의 하단을 부모 요소의 글꼴의 하단과 맞춥니다.
length 　
% 이 요소를 정렬하기 위해 "line-height" 속성의 퍼센트 값을 사용합니다. 음수 값을 사용할 수 있습니다.
inherit 부모 요소에서 vertical-align 속성 값을 상속받아야 합니다.

기술 세부 사항

기본 값: baseline
상속성: no
버전: CSS1
JavaScript 문법: object.style.verticalAlign="bottom"

더 많은 예제

이미지를 세로 정렬
텍스트 안에 이미지를 세로로 정렬하는 방법을 보여줍니다.

브라우저 지원

표中之数字은 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
1.0 4.0 1.0 1.0 4.0