div 내의 요소를 수직으로 정렬하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-20 17:37:191226검색
다음 방법 중 하나를 사용하여 div의 요소를 쉽게 수직으로 정렬할 수 있습니다 −
- 위치 속성
- 행 높이 속성
- 채우기 속성
예시를 하나씩 살펴보겠습니다 -
위치 속성을 사용하여 div의 요소를 수직으로 정렬하세요
위치 속성은 요소 위치를 지정하는 데 사용되며 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성과 함께 사용하여 원하는 위치에 요소를 배치할 수 있습니다. −
정적 − 요소 상자는 일반적인 문서 흐름의 일부로 이전 요소와 다음 요소를 따라 배치됩니다.
relative − 요소의 상자는 일반 흐름의 일부로 배치된 다음 어느 정도 거리를 두고 오프셋됩니다.
absolute − 요소의 상자는 해당 요소가 포함된 블록을 기준으로 배치되며 문서의 일반적인 흐름에서 완전히 제거됩니다.
fixed − 요소 상자는 절대 위치에 있으며 위치: 절대 동작 설명이 있습니다. 주요 차이점은 고정 위치의 요소를 포함하는 블록이 항상 뷰포트라는 것입니다.
이제 위치 속성 −
을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다.Example
의 중국어 번역은Example
입니다. 으아악line-height 속성을 사용하여 div의 요소를 수직으로 정렬합니다
line-height 속성은 텍스트 한 줄을 구성하는 인라인 상자의 높이를 수정합니다. line-height에 가능한 값은 다음과 같습니다 -
normal − 요소 내의 줄 높이를 "합리적인" 거리로 설정하도록 브라우저에 지시합니다.
number − 요소의 실제 줄 높이는 이 값에 요소의 글꼴 크기를 곱한 값입니다.
length − 요소의 행 높이가 지정된 값입니다.
백분율 − 요소의 행 높이는 요소 글꼴 크기의 백분율로 계산됩니다.
이제 line-height 속성을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다. -
Example
의 중국어 번역은Example
입니다. 으아악padding 속성을 사용하여 div의 요소를 수직으로 정렬하세요
padding 속성을 사용하면 요소의 콘텐츠와 테두리 사이에 표시되어야 하는 공간을 지정할 수 있습니다. 이 속성의 값은 길이, 백분율 또는 상속이라는 단어여야 합니다. 값이 상속인 경우 해당 패딩은 상위 요소와 동일합니다. 백분율을 사용하는 경우 백분율은 포함 상자를 기준으로 합니다.
다음 CSS 속성을 사용하여 목록을 제어할 수 있습니다. 다음 속성을 사용하여 상자의 각 측면에 대해 서로 다른 패딩 값을 설정할 수도 있습니다. -
- padding-bottom은 요소의 하단 패딩을 지정합니다.
- padding-top은 요소의 상단 패딩을 지정합니다.
- padding-left는 요소의 왼쪽 패딩을 지정합니다.
- padding-right는 요소의 올바른 패딩을 지정합니다.
- padding은 이전 속성의 약어 역할을 합니다.
이제 패딩 속성을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다. −
Example
의 중국어 번역은Example
입니다.<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
#demo1 {
position: relative;
}
#demo2 {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
#demo1 {
background-color: yellow;
border: 2px solid gray;
height: 15em;
}
#demo2 {
background-color: skyblue;
border: 1px solid orange;
width: 100%;
}
</style>
</head>
<body>
<h1>Vertically Align Elements</h1>
<p>Use the position property:</p>
<div id="demo1">
<div id="demo2">
<p>This is a demo text</p>
<p>This is another demo text</p>
</div>
</div>
</body>
</html>
위 내용은 div 내의 요소를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!