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 스크린샷
3. code
이 센터링 방법은 IE 상위 버전이든 IE 상위 버전이든 모든 주요 플랫폼 및 브라우저와 완벽하게 호환되도록 div 센터링 효과를 만드는 것입니다.
CSS를 사용하여 DIV의 수평 중앙 정렬을 구현하는 방법입니다.
관련 읽기:
html을 txt 파일로 변환하는 방법 테이블 테두리를 구현하기 위해 테이블과 td의 배경을 설정하는 방법 테이블과 td에 테이블 테두리를 설정하는 방법 능숙하게위 내용은 CSS를 사용하여 DIV의 수평 중심 맞추기 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
