컨테이너 내에서 Div를 수평으로 가운데에 배치하는 방법은 무엇입니까?

컨테이너 내 Div의 수평 정렬

컨테이너 내에서 div를 수평 중앙에 배치하려고 하면 어려움에 직면할 수 있습니다. 이는 주로 float: left의 기본 동작 때문입니다.

이 문제를 해결하려면 div에 float 대신 display: inline-block을 사용하는 것이 좋습니다. 이 기술을 사용하면 여백을 수동으로 계산할 필요가 없으며 반응형 정렬이 가능합니다.

예를 들어 다음 CSS에서

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

"block" 클래스가 있는 div는 인라인 요소이며 "row" 클래스를 사용하여 컨테이너 div 내에서 수평으로 정렬됩니다.

또한 블록이 하나만 있는 행 div가 있는 경우 div의 경우 text-align: center:

<code class="css">.row-with-single-block {
  text-align: center;
}</code>

를 사용하여 중앙에 배치할 수 있습니다.

위 내용은 컨테이너 내에서 Div를 수평으로 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!