코드랩 레퍼런스
vertical-align 본문
Summary
특징 | 설명 |
---|---|
기본 값 | baseline |
상속 | 안됨 |
애니메이션 | 가능 |
버전 | CSS1 |
Definition
- vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
- vertical-align은 인라인 요소에만 적용되기 때문에 블럭 구조에서 정렬은 적용되지 않습니다.
- 글씨와 이미지 및 글씨와 input의 정렬상태가 맞지 않는다면, 이미지 요소 및 input에게 vertical-align을 주어야합니다.
Syntax
Property
속성 값 | 설명 |
---|---|
baseline | 상하 정렬의 상태를 기본으로 설정합니다. |
length | 상하 정렬의 상태를 CSS 단위로 설정합니다. |
% | 상하 정렬의 상태를 %로 설정합니다. |
sub | 상하 정렬의 상태를 글씨의 위쪽부분(sub)으로 설정합니다. |
super | 상하 정렬의 상태를 글씨의 위부분(super)으로 설정합니다. |
top | 상하 정렬의 상태를 위부분(top)을 기준으로 정렬합니다. |
text-top | 상하 정렬의 상태를 텍스트의 위부분(text-top)을 기준으로 정렬합니다. |
middle | 상하 정렬의 상태를 중간(middle)을 기준으로 정렬합니다. |
bottom | 상하 정렬의 상태를 아래부분(bottom)을 기준으로 정렬합니다. |
text-bottom | 상하 정렬의 상태를 텍스트의 아래부분(text-bottom)을 기준으로 정렬합니다. |
inherit | 상하 정렬의 상태를 상위요소한테 상속받습니다. |
Compatibility
6 | 7 | 8 | 9 | 10 | 11 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
vertical-align |
Sample
버티컬 얼라인그리드 시스템은 디자인 결과를 보장하는 것이 아니라, 각기 다른 디자이너들이 자신만의 개성 있는 스타일에 적합한 해결책을 찾을 수 있도록 객관적인 방법을 제공합니다. 그리드 시스템을 활용하려면, 그리드를 사용하는 방법을 배우려고 노력해야 합니다. 그리드 연습이 필요한 예술이기 때문입니다.