HTML 설정 센터 표시
- WBOY원래의
- 2023-05-21 17:07:3727232검색
HTML은 웹 디자인에서 가장 일반적으로 사용되는 마크업 언어 중 하나이며, 중앙 표시도 웹 디자인에서 가장 기본적인 표시 방법 중 하나입니다. 이 기사에서는 HTML을 사용하여 웹 페이지에서 중앙 표시를 설정하는 방법을 소개합니다.
1. 가로 가운데 맞춤
1.1 텍스트 정렬 속성 사용
텍스트 정렬 속성을 사용하면 HTML 요소를 가로로 가운데에 맞출 수 있습니다. 이 특성을 상위 요소에 설정하여 하위 요소를 가로 중앙에 배치할 수 있습니다.
샘플 코드:
<!doctype html>
<html>
<head>
<style>
.container {
text-align: center;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>1.2 여백 속성 사용하기
여백 속성을 사용하여 수평 중앙 정렬을 구현할 수도 있습니다. 이 방법은 너비가 고정된 요소에만 작동합니다.
샘플 코드:
<!doctype html>
<html>
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>2. 세로 가운데 맞춤
2.1 텍스트 정렬 속성 사용
HTML 요소에서 세로 가운데 맞춤을 구현해야 하는 경우 상위 요소에 display: table 속성을 설정하고 디스플레이를 설정할 수 있습니다. 하위 요소의 table-cell 및 수직 정렬: 중간 속성.
샘플 코드:
<!doctype html>
<html>
<head>
<style>
.container {
display: table;
height: 500px;
width: 100%;
background-color: gray;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
<head>
<body>
<div class="container">
<div class="inner">
<p>这是一段文字</p>
</div>
</div>
</body>
</html>2.2 flex 속성 사용
수직 중앙 정렬을 달성하는 또 다른 방법은 flex 속성을 사용하는 것입니다. 상위 요소에 display: flex를 설정하고 하위 요소에 align-items: center 및 justify-content: center 속성을 설정하여 수직 중심 맞춤을 달성합니다.
샘플 코드:
<!doctype html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 100%;
background-color: gray;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>두 방법 모두 HTML에서 쉽게 중앙 정렬을 구현할 수 있습니다. 수평 중앙 정렬을 위해 여백 속성을 사용할 때 고정 너비를 지정하고 여백 속성의 왼쪽 및 오른쪽 값을 자동으로 설정하여 중앙 정렬을 구현해야 한다는 점에 유의해야 합니다.
요약:
이 글에서는 text-align 및 margin 속성이 수평 센터링에 적합한 반면, display: table, display: flex 및 Vertical-align 속성은 수직 센터링에 적합한 두 가지 방법을 소개합니다. . 어느 쪽이든 HTML의 중앙 정렬은 쉽습니다.
위 내용은 HTML 설정 센터 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!