오늘 가져온 코드는 많은 친구들이 사용해야 하는 코드입니다. CSS는 DIV 센터링을 구현하는 데 사용됩니다. 나중에 DIV 센터링을 구현하기 위해 CSS를 사용해야 할 때 이 글을 저장하면 편리할 것입니다. CSS를 사용하여 DIV를 중앙에 배치하는 방법은 여러 가지가 있습니다. 이번에는 비교적 간단하고 호환성이 뛰어난 코드를 가르쳐 드리겠습니다.
두 가지 주요 CSS 코드가 필요합니다. 하나는 text-align:center(콘텐츠가 가운데 맞춤)이고 다른 하나는 margin:0 auto입니다. 두 스타일을 함께 사용하면 가운데 맞춤 디스플레이 레이아웃을 얻을 수 있습니다. div 상자.
먼저 본문에 text-align:center를 설정한 다음 중앙에 정렬해야 하는 div 상자에 CSS 스타일 margin:0 auto를 설정하여 해당 div가 수평으로 중앙에 정렬될 수 있도록 합니다.
div 센터링 코드 적용 설명 div 센터링 효과를 관찰하기 위해 div에 div를 설정하고 html의 div 태그에 class="div"를 사용하고 설정합니다. 너비는 400px, 높이는 100px이며 빨간색 테두리가 있습니다. 그래서 우리는 효과를 관찰할 수 있습니다.
1. 완전한 html+css 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div居中 在线演示 www.divcss5.com</title>
<style>
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<div class="div">
DIVCSS5实例
</div>
</body>
</html>div 센터링 코드 적용 기능
이 센터링 방법을 사용하면 IE 상위 버전이든 상위 버전이든 관계없이 모든 주요 플랫폼 및 브라우저와 완벽하게 호환되는 div 센터링 효과를 얻을 수 있습니다. IE 버전.
위 내용은 CSS를 사용하여 DIV를 중앙에 배치하는 방법을 배웠습니까?
관련 추천:
위 내용은 CSS를 사용하여 DIV를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
