CSS를 사용하여 DIV를 중앙에 배치하는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 DIV를 중앙에 배치하는 방법

php中世界最好的语言

풀어 주다： 2017-11-20 11:07:52

원래의

2888명이 탐색했습니다.

오늘 가져온 코드는 많은 친구들이 사용해야 하는 코드입니다. 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를 중앙에 배치하는 방법을 배웠습니까?