집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 DIV의 수평 중심 맞추기 실현

CSS를 사용하여 DIV의 수평 중심 맞추기 실현

php中世界最好的语言원래의: 2017-11-21 09:46:5424155검색

CSS를 사용하여 div의 중앙 정렬을 설정하는 방법: 먼저 본문에 "text-align:center"를 설정한 다음 중앙에 정렬해야 하는 div 상자에 대해 CSS 스타일을 "margin:0 auto"로 설정합니다. 해당 div를 가로로 표시합니다.

CSS를 사용하여 DIV를 중앙에 배치하는 방법은 무엇입니까? DIV의 가로 중앙 표시를 구현하기 위해 CSS를 사용하여 누구나 쉽게 이해할 수 있는 코드를 만들었습니다.

두 가지 주요 CSS 코드가 필요합니다. 하나는 text-align:center(콘텐츠가 가운데 맞춤)이고 다른 하나는 margin:0 auto입니다. 두 스타일을 함께 사용하면 가운데 맞춤 디스플레이 레이아웃을 얻을 수 있습니다. div 상자.

먼저 본문에 text-align:center를 설정한 다음 중앙에 정렬해야 하는 div 상자에 CSS 스타일 margin:0 auto를 설정하여 해당 div가 수평으로 중앙에 정렬될 수 있도록 합니다.

div 센터링 코드 적용, div 센터링 효과를 관찰하기 위해 ".div"라는 이름의 div에 대해 div를 설정하고 html의 div 태그에 class="div"를 사용하고 너비를 400px로 설정합니다. 100px로, 테두리는 빨간색으로. 그래서 우리는 효과를 관찰할 수 있습니다.

1. html+css 코드 완성

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></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>

2. div+css 센터링 예시 스크린샷

센터링 효과를 구현한 div CSS 스크린샷

CSS를 사용하여 DIV의 수평 중심 맞추기 실현 3. code

이 센터링 방법은 IE 상위 버전이든 IE 상위 버전이든 모든 주요 플랫폼 및 브라우저와 완벽하게 호환되도록 div 센터링 효과를 만드는 것입니다.

CSS를 사용하여 DIV의 수평 중앙 정렬을 구현하는 방법입니다.

CSS를 사용하여 DIV의 수평 중심 맞추기 실현

관련 기사