CSS의 수직 정렬 속성 사용법에 대한 자세한 설명

수직 정렬 정의

W3C의 수직 정렬 정의: 수직 정렬 속성은 요소의 수직 정렬을 설정합니다. 이 속성은 요소가 나타나는 행의 기준선을 기준으로 인라인 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이렇게 하면 요소가 높아지는 대신 요소가 낮아집니다. 테이블 셀에서 이 속성은 셀 상자의 셀 내용 정렬을 설정합니다.

텍스트는 일반적으로 보이지 않는 기준선을 기준으로 정렬되며 문자의 아래쪽이 그 위에 위치합니다. 수직 정렬 속성은 텍스트 기준선 위나 아래로 글자나 이미지를 올리거나 내립니다. 수직 정렬 속성의 값에는 기준선, 하위, 슈퍼, 상단, 텍스트-상단, 중간, 하단, 텍스트-하단 등이 포함되며, 초기값은 기준선이다.

baseline(기준선) - 하위 요소의 기준선을 상위 요소의 기준선과 정렬합니다. 이미지, 객체 등 기준선이 없는 요소의 경우 하단을 상위 요소의 기준선에 맞춰 정렬하세요.

sub(아래) - 요소를 아래(아래 첨자)에 배치합니다. 특히 요소의 기준선을 상위 요소의 기본 아래 첨자 위치에 맞춰 정렬합니다.

super(위) - 요소를 위(위 첨자)에 배치합니다. 특히 요소의 기준선을 상위 요소의 기본 위 첨자 위치에 맞춰 정렬합니다.

text-top - 요소의 상단을 상위 요소의 가장 높은 문자 상단에 정렬합니다.

top - 요소의 상단을 행에서 가장 높은 항목의 상단과 정렬합니다.

middle - 요소를 수직으로 중앙에 배치합니다.

bottom(하단) - 요소의 하단을 행에서 가장 낮은 항목의 하단과 정렬합니다.

text-bottom (text-bottom) - 요소의 하단을 상위 요소 글꼴의 하단과 정렬합니다.

vertical-align 해석

W3C의 수직 정렬 정의는 크게 두 부분으로 나눌 수 있습니다.

처음 사용하려면 먼저 다음 문장을 살펴보세요. "테이블 셀에서 이 속성은 "설정됩니다. 셀 상자에 있는 셀 내용의 정렬입니다." 이는 이해하기 쉽습니다. 표의 td에 수직 정렬:중간 스타일을 추가하면 표의 내용이 수직으로 중앙에 배치됩니다. 마찬가지로 수직 정렬:하단은 하단을 정렬하고, 수직 정렬:상단을 제공하면 상단을 정렬합니다.

두 번째 사용법은 이전 페이지의 문장을 읽어보세요. "이 속성은 요소가 위치한 줄의 기준선을 기준으로 인라인 요소의 기준선의 수직 정렬을 정의합니다." 전문적인 언어를 사용하는 방법 비유를 사용할 수 있습니다. 두 개의 인라인 요소 a와 b가 있고 a와 b가 모두 img라고 가정합니다. 아래와 같이 a의 중간 위치에 정렬됩니다.

a와 b가 모두 수직 정렬:중간 스타일을 추가한 후 서로의 중간 위치가 정렬됩니다. 즉, 수직 방향의 중간선이 정렬됩니다.

예를 들어 img와span이 함께 나타나는데 텍스트를 이미지에 맞춰 정렬하려면 이미지의 중간 위치에 img{vertical-align:middle;}을 추가해야 합니다. image

또 다른 예로, 입력과 스팬을 함께 사용하는 경우 Google Firefox IE8 이상에서는 기본적으로 스팬이 입력의 중간 위치에 있지만, ie6/ie7에서는 스팬의 아래쪽이 입력의 아래쪽에 정렬됩니다. 입력의 하단을 통합하는 방법은 입력에 input{vertical-align:middle;}을 추가하는 것입니다. 수직 중간선을 정렬하려면 범위에 범위를 설정하세요.

vertical-align 사용법

1. 인라인 요소에 사용됨

다음은 수직 정렬 속성의 사용법을 예시로 이미지의 수직 정렬을 사용합니다.

img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2. 테이블에서 사용

vertical-align 속성은 테이블 셀에서 직접 사용할 수 있으며, 그 효과는 HTML의 valign 속성과 동일합니다.

td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3. 블록 요소에 사용됨

수직 정렬 속성은 블록 요소에 적용되지 않기 때문에 일부 사람들은 수직 정렬 속성을 유효하지 않게 사용합니다. 그러나 표시 속성을 사용하고 그 값을 table-cell로 설정하고 블록 요소를 셀로 변환한 다음 수직 정렬 속성을 사용할 수 있습니다.

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

위 방법에는 호환성 문제가 있다는 점에 유의해야 합니다. IE6/IE7과 World Window, 360, Aoyou 등 IE를 핵심으로 하는 브라우저는 이 사용법을 지원하지 않지만 Chrome과 Firefox에서는 지원합니다.

ie6/7과 호환되도록 하려면 div

div{
*display:block;
 
*font-size:175px;/*高度为200px，  则200*0.873约为175px* 撑开/ 
 }

에 다음 속성을 추가할 수 있습니다.

위 내용은 CSS의 수직 정렬 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!