Properties

Properties

Draft
  • account_tree
  • bug_report

vertical-alignCSS2

inline-level 요소, display 타입이 table-cell인 요소의 세로 방향 정렬을 지정한다.

설명

::first-letter::first-line에도 적용된다.

설정 가능한 속성 값

inline-level

주로 부모 요소에 대하여 상대적으로 수직 정렬하는 값들

  • baseline키워드

    부모의 baseline에 맞추어 해당 요소의 baseline을 정렬한다. 브라우저마다 다른 결과를 보여줄 수 있다.

  • sub키워드

    요소의 baseline을 부모의 subscript-baseline으로 정렬한다.

  • super키워드

    요소의 baseline을 부모의 superscript-baseline으로 정렬한다.

  • text-top키워드

    요소의 top을 부모 요소 폰트의 top으로 정렬한다.

  • text-bottom키워드

    요소의 bottom을 부모 요소 폰트의 bottom으로 정렬한다.

  • middle키워드

    요소의 middle을 부모 요소 폰트의 baseline + x-height / 2로 정렬한다.

  • <length>길이단위허용

    요소의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬한다.

    • 사용 가능한 단위: px
    • 음수 허용

  • <percentage>퍼센트
    와 마찬가지로 해당 요소의 baseline을 부모의 baseline에서 line-height의 퍼센트로 주어진 퍼센트만큼 위로 정렬한다.

inline-level에서 특별하게 사용되는 값

다음 두 값은 부모가 아닌 전체 라인에 대해 수직 정렬하는 값이다.

  • top키워드

    요소의 top과 그 자손들의 top을 전체 라인의 top으로 정렬한다.

  • bottom키워드

    요소의 bottom과 그 자손들의 bottom을 전체 라인의 bottom으로 정렬한다.

  • table cell키워드

    다음 아래는 display 타입이 table cell인 요소에 사용되는 값이다.

  • baseline키워드

    cell의 baseline을 같은 행의 다른 cell들의 baseline과 정렬한다.

  • top키워드

    cell의 top padding edge를 행의 top으로 정렬한다.

  • middle키워드

    cell의 padding box의 중심을 행에서 중앙 정렬한다.

  • bottom키워드

    cell의 bottom padding edge를 행의 bottom으로 정렬한다.

버전 명세

Version NameDescriptionFlags
CSS2 값을 추가하고 display 값이 table-cell인 요소에 적용할 수 있다.

지원 웹브라우저