이 글에서는 주로 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 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
