코드랩 레퍼런스

vertical-align 본문

CSS

vertical-align

webstoryboy 2016. 6. 25. 15:31
vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.

Summary

특징 설명
기본 값 baseline
상속 안됨
애니메이션 가능
버전 CSS1

Definition

  • vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
  • vertical-align은 인라인 요소에만 적용되기 때문에 블럭 구조에서 정렬은 적용되지 않습니다.
  • 글씨와 이미지 및 글씨와 input의 정렬상태가 맞지 않는다면, 이미지 요소 및 input에게 vertical-align을 주어야합니다.

Syntax

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

Property

속성 값 설명
baseline 상하 정렬의 상태를 기본으로 설정합니다.
length 상하 정렬의 상태를 CSS 단위로 설정합니다.
% 상하 정렬의 상태를 %로 설정합니다.
sub 상하 정렬의 상태를 글씨의 위쪽부분(sub)으로 설정합니다.
super 상하 정렬의 상태를 글씨의 위부분(super)으로 설정합니다.
top 상하 정렬의 상태를 위부분(top)을 기준으로 정렬합니다.
text-top 상하 정렬의 상태를 텍스트의 위부분(text-top)을 기준으로 정렬합니다.
middle 상하 정렬의 상태를 중간(middle)을 기준으로 정렬합니다.
bottom 상하 정렬의 상태를 아래부분(bottom)을 기준으로 정렬합니다.
text-bottom 상하 정렬의 상태를 텍스트의 아래부분(text-bottom)을 기준으로 정렬합니다.
inherit 상하 정렬의 상태를 상위요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
vertical-align

Sample

vertical-align"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

버티컬 얼라인그리드 시스템은 디자인 결과를 보장하는 것이 아니라, 각기 다른 디자이너들이 자신만의 개성 있는 스타일에 적합한 해결책을 찾을 수 있도록 객관적인 방법을 제공합니다. 그리드 시스템을 활용하려면, 그리드를 사용하는 방법을 배우려고 노력해야 합니다. 그리드 연습이 필요한 예술이기 때문입니다.















Ad

Comments