CSS의 수직 정렬 속성 해석

구문:

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

매개변수:
baseline: valign 기능을 지원하는 개체의 내용을 기준선에 맞춥니다.
sub: 세로로 정렬된 텍스트의 아래 첨자
super: 세로로 정렬된 텍스트의 위 첨자
top: valign 기능을 지원할 객체 객체의 내용을 객체의 상단에 정렬
text-top : valign 기능을 지원하는 객체의 텍스트를 객체의 상단에 정렬
middle : 객체의 내용을 정렬 valign 기능을 지원하는 개체의 텍스트를 개체의 중앙에 정렬
bottom: valign 기능을 지원하는 개체의 텍스트를 개체의 중앙에 정렬
text-bottom: valign 기능을 지원하는 개체의 텍스트를 개체의 중앙에 정렬
length: CSS2 부동 소수점 숫자와 단위 식별자 또는 백분율로 구성된 길이 값 | 부정적일 수 있습니다. 기준선으로부터의 오프셋을 정의합니다. 기준선은 숫자 값의 경우 0이고 백분율의 경우 0%입니다. 현재 IE5는 이를 지원하지 않습니다. 길이 단위 보기

설명:

개체 내용의 수직 정렬을 설정하거나 검색합니다.
해당 스크립트 기능은 VerticalAlign입니다. 제가 쓴 다른 책들도 참조해 주세요.

예:

td { vertical-align : center; }

css 수직 정렬: 중간에서 범위까지 추가가 작동하지 않는 이유는 무엇입니까?

vertical-align은 특정 표시 스타일(예: 셀 표시 모드: 테이블-셀)이 있는 요소에서만 작동합니다. 따라서 위아래로 수직 중심 정렬을 달성하려면 다음 스타일을 사용할 수 있습니다.

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

line-height 속성 설정과 비교하여 위 설정 방법은 텍스트에 여러 줄이 있는 상황에 적합합니다.

다음은 예시입니다:

CreateHtml element

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

Set css style

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

Vertical-align: top; 무엇을 의미하나요

vertical-align 요소의 수직 배열을 설정합니다. .
인라인 요소의 기준선은 해당 요소가 위치한 행의 기준선을 기준으로 수직으로 정렬됩니다. 기준선 | 하위 | -bottom | 상속
예를 들어 top은 텍스트의 상단을 수직으로 정렬하는 것을 의미합니다.
테이블에서 이 속성은 셀 내용의 정렬을 설정합니다. 수직 정렬의 가장 일반적으로 사용되는 응용 프로그램은 td에 있어야 합니다.
내부 개체의 위치 이 속성은 다양한 브라우저에서 동일한 효과를 갖습니다. 동일하지 않으므로 주의해서 사용하세요

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