이 글에서는 주로 div 콘텐츠 센터링을 소개합니다. 즉, div 콘텐츠를 상하좌우로 센터링하는 효과 방법입니다.
일반적인 웹사이트 탐색 표시줄과 같은 div 콘텐츠 중앙 집중화의 효과는 모두가 잘 알고 있을 것입니다. 자, 이전 글에서는 div 가로 중심과 div 세로 중심의 구현 방법을 소개했습니다.
추천 학습 참조: "HTML Tutorial"
다음에서는 div 콘텐츠 센터링 효과를 얻는 방법을 계속 소개합니다.
div 콘텐츠를 중앙에 배치하는 코드 는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px; background: red;">
PHP中文网
</div>
</body>
</html>프론트 엔드 효과는 다음과 같습니다.
그림과 같이 div의 콘텐츠가 중앙에 정렬됩니다.
여기서 line-height 속성을 설정하여 콘텐츠가 세로로 가운데에 오도록 하고 text-align: center; 속성을 설정하여 div 콘텐츠가 가로로 가운데에 오도록 했습니다.
margin: 0 auto; 속성은 div가 브라우저 페이지의 가로 및 중앙에 표시될 수 있도록 설정됩니다. 물론 여백이 설정되지 않은 경우 div 콘텐츠가 계속 표시됩니다.
관련 속성 요약:
line-height 속성은 줄 사이의 거리(줄 높이)를 설정합니다.
text-align 속성은 요소 내 텍스트의 가로 정렬을 지정하고, center는 텍스트를 가운데로 정렬한다는 의미입니다.
이 글은 Div 콘텐츠 센터링 효과의 구현 방법에 관한 것입니다. 매우 간단하고 이해하기 쉬우므로 필요한 친구들에게 도움이 되길 바랍니다!
위 내용은 Div 콘텐츠의 센터링 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
