>  기사  >  웹 프론트엔드  >  CSS로 div를 중앙에 배치하는 방법은 무엇입니까? CSS에서 div를 중앙에 배치하는 방법

CSS로 div를 중앙에 배치하는 방법은 무엇입니까? CSS에서 div를 중앙에 배치하는 방법

云罗郡主
云罗郡主원래의
2018-11-21 14:02:124998검색

div를 수평으로 중앙에 배치하는 방법은 무엇입니까? div를 중앙에 배치하는 방법은 무엇입니까? 많은 사람들이 이 질문을 할 것이라고 생각합니다. 이 기사에서는 CSS를 사용하여 div를 중앙에 배치하는 방법에 대해 설명합니다. 그리고 div의 센터링을 달성하는 방법.

웹을 탐색해보면 일반 웹사이트의 본문은 페이지 중앙에 있고, div만 구현하면 브라우저 중앙에 표시되는 것을 볼 수 있습니다. 센터링 조건과 브라우저 센터링 조건을 일관성 있게 저장합니다.

가장 바깥쪽 div 상자의 이름을 php1로 지정하면 본문 스타일만 중앙에 오도록 설정하면 됩니다.

body{text-align:center}

이때 필요한 것은 다음과 같습니다. php1을 변경하려면 이 상자는 margin:0 자동으로 설정되어 있으며 코드는 다음과 같습니다:

#php1{margin:0 auto}

효과 관찰을 용이하게 하기 위해 높이가 php1에 검은색 테두리를 추가합니다. 100px, 너비는 300px입니다.

코드는 다음과 같습니다:

<div id="php1">php中文网div居中效果演示</div>

표시 효과는 다음과 같습니다.

CSS로 div를 중앙에 배치하는 방법은 무엇입니까? CSS에서 div를 중앙에 배치하는 방법

CSS 스타일에서는 div의 중앙 정렬을 달성하려면 개체를 margin:0 자동 스타일로 설정하기만 하면 되지만 일부 브라우저는 기본적으로 중앙 정렬을 사용하여 브라우저와 호환됩니다. 위의 방법을 사용할 수 있습니다. 그것을 설정합니다.

위는 CSS로 div를 중앙에 배치하는 방법입니다. CSS를 사용하여 div를 중앙에 배치하는 방법에 대한 전체 소개입니다. CSS3Tutorial에 대해 자세히 알아보려면 PHP 중국어 웹사이트를 참고하세요.


위 내용은 CSS로 div를 중앙에 배치하는 방법은 무엇입니까? CSS에서 div를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.