Div 콘텐츠의 센터링 효과를 얻는 방법
이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7692
15
1639
14
1393
52
1287
25
1229
29