vertical-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.

시도해 보기

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: sub;

vertical-align: text-top;


  

    Align the star:
    
  




#default-example > p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}

vertical-align 속성은 두 가지 상황에서 사용할 수 있습니다.

  • 인라인 요소의 상자를 선 상자를 포함해 자기 자신 안에 수직으로 정렬합니다. 예를 들어, 텍스트 줄에 이미지를 세로로 배치하는 데 사용할 수 있습니다.
  • 테이블 셀 내용을 정렬합니다.

vertical-align은 인라인, 인라인 블록 및 테이블 셀 요소에만 적용되므로 블록 레벨 요소를 수직으로 정렬하는 데 사용할 수 없습니다.

구문

css
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/*  values */
vertical-align: 10em;
vertical-align: 4px;

/*  values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

vertical-align 속성은 아래 나열된 값 중 하나로 지정됩니다.

인라인 요소의 값

부모-상대 값

다음 값은 요소를 부모 요소에 대해 수직으로 정렬합니다.

baseline

부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 replaced elements의 베이스라인은 예를들면