수직 정렬은 무엇을 의미합니까? 사용하는 방법?
- 不言원래의
- 2019-04-12 14:29:519319검색
vertical-align은 요소의 수직 정렬을 설정하는 데 사용할 수 있는 CSS의 속성입니다. 수직 정렬 속성의 사용법을 자세히 살펴보겠습니다.
vertical-align 속성은 요소가 위치한 줄의 기준선을 기준으로 인라인 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이렇게 하면 요소가 높아지는 대신 요소가 낮아집니다. 테이블 셀에서 이 속성은 셀 상자의 셀 내용 정렬을 설정합니다.
vertical-align 속성에는 다음과 같은 많은 값이 있습니다.
baseline: 기본값. 요소는 상위 요소의 기준선에 배치됩니다.
sub: 텍스트의 아래 첨자를 세로로 정렬합니다.
super: 텍스트의 위 첨자를 세로로 정렬합니다.
top: 요소의 상단을 행에서 가장 높은 요소의 상단과 정렬합니다.
text-top: 요소의 상단을 글꼴 상단과 정렬합니다. 상위 요소
middle: 이 요소를 정렬합니다. 상위 요소의 중간에 배치됩니다.
bottom: 요소의 상단을 행의 가장 낮은 요소의 상단과 정렬합니다.
text-bottom: 요소의 하단을 상위 요소의 글꼴 하단과 정렬합니다.
length:
%: "line-height" 속성의 백분율 값을 사용하여 이 요소를 정렬합니다. 음수 값이 허용됩니다.
inherit: 수직 정렬 속성의 값이 상위 요소에서 상속되도록 지정합니다.
예: vertical-align top은 텍스트의 상단을 수직으로 정렬하는 것입니다.
표에서 이 속성은 셀 내용의 정렬을 설정합니다. 수직 정렬은 td에서 내부 개체의 위치를 제어하는 데 가장 일반적으로 사용됩니다.
구체적인 예를 살펴보겠습니다.
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" / alt="수직 정렬은 무엇을 의미합니까? 사용하는 방법?" >位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" / alt="수직 정렬은 무엇을 의미합니까? 사용하는 방법?" >位于段落中的图像。
</p>
</body>
</html>작동 효과는 다음과 같습니다.
이 글은 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 CSS 동영상을 시청하세요. PHP 중국어 웹사이트 튜토리얼 칼럼! ! !
위 내용은 수직 정렬은 무엇을 의미합니까? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!