값

다음 값 각각에 대해 목록 항목의 라인 상자 내부의 인라인 이미지에 적용합니다. 각 이미지의 선 상자에는 회색 점선 테두리가 있습니다. 각 값에 대해 이미지를 정렬하는 데 사용되는 선은 빨간색입니다.

기준 이것은 기본값입니다. 요소의 기준선을 선 상자의 기준선과 정렬합니다. 요소에 기준선이없는 경우 하단 여백 가장자리를 선의 기준선과 정렬합니다.

middle 요소의 수직 중간 점을 선의 기준선에 선의 x 높이의 절반을 더한 값 ( font).

이것은 vertical-align에 가장 일반적으로 사용되는 값 중 하나입니다. 속성이며 일반적으로 아이콘 및 목록 마커를 텍스트 줄에 정렬하는 데 사용됩니다.

sub 요소의 기준선을 줄의 아래 첨자에 대한 적절한 위치로 낮 춥니 다. (이 값은 요소 텍스트의 글꼴 크기에 영향을주지 않습니다.)

super 요소의 기준선을 줄의 위 첨자에 대한 적절한 위치로 올립니다. (이 값은 요소 텍스트의 글꼴 크기에 영향을주지 않습니다.)

text-top 요소의 상단을 줄의 콘텐츠 영역 상단에 정렬합니다. 콘텐츠 영역의 높이는 라인에있는 모든 글꼴의 최대 어 센더 및 디 센더에 대해 충분히 높으며 정렬 라인은 해당 높이의 맨 위에 있습니다. 글꼴의 기준선 정렬에 따라 높이가 관련된 글꼴 크기보다 클 수 있습니다.

text-bottom 요소의 하단을 하단에 정렬 라인 콘텐츠 영역의. 콘텐츠 영역의 높이는 라인에있는 모든 글꼴의 최대 디 센더 및 어 센더에 대해 충분히 높으며 정렬 라인은 해당 높이의 맨 아래입니다. 글꼴의 기준 정렬에 따라 높이가 관련된 글꼴 크기보다 클 수 있습니다.

top 요소의 상단을 상단에 정렬합니다. 전체 라인. 즉, 여러 이미지와 같이 높이가 서로 다른 다른 요소가 줄에있는 경우 줄의 맨 위가 두 이미지 중 가장 높은 값만큼 높아집니다.

줄에 명시 적으로 설정된 line-height 라인에서 가장 높은 콘텐츠보다 높으면 라인 상자의 상단이 해당 높이에 따라 결정됩니다.

bottom

전체 줄의 맨 아래에 요소를 정렬합니다.

줄에 명시 적으로 설정된

줄에서 가장 낮은 콘텐츠보다 낮 으면 줄 상자의 하단이 해당 높이에 따라 결정됩니다.

< percentage > 기준선 위로 요소를 높이거나 (퍼센트 값이 양수인 경우) 아래 요소를 낮 춥니 다. 기준선 (백분율 값이 음수 인 경우)을 지정된 양만큼. 지정된 금액은 line-height 값의 백분율입니다. 0% 값은 baseline와 동일 함을 의미합니다.

< length > 요소를 기준선 위로 올리거나 (길이 값이 양수인 경우) 기준선 아래의 요소를 내립니다 (길이 값이 음수 인 경우). 지정된 금액만큼. 값 ‘0’은 baseline와 동일 함을 의미합니다.

참고

값 top, bottom 및 middle는 테이블 셀 요소에 적용될 때 예상대로 작동합니다. 그러나 다른 값은 일부 브라우저에서 예기치 않은 동작을 가질 수 있습니다. Chris Coyier가 가장 잘 설명합니다.

표 셀에 세로 정렬을 사용할 때 위쪽, 아래쪽 및 가운데를 고정하는 것이 가장 좋습니다. 어쨌든 다른 값은 전혀 의미가 없으며 예측할 수없는 크로스 브라우저 결과가 있습니다. 예를 들어 셀을 text-bottom으로 설정하면 텍스트가 IE 6에서는 맨 아래로, Safari 4에서는 맨 위로 정렬됩니다. sub로 설정하면 IE 6에서는 가운데 정렬이되고 Safari 4에서는 맨 위로 정렬됩니다.

표 셀의 기본 수직 정렬 (<td>)은 middle입니다. 그러나 display: table-cell가있는 블록 수준 요소의 기본 수직 정렬은 여전히 top이며, 이는 블록 수준의 기본 정렬입니다. 일반적으로 컨테이너. 라이브 예제는 아래 데모 섹션을 참조하십시오.