내 div가 포함된 div 내에서 가로 중앙에 위치하지 않는 이유는 무엇입니까?

가로 DIV 정렬

포함된 div 내에서 div가 가로로 정렬되지 않는 문제가 발생했습니다. 일반적인 쿼리 및 해결 방법은 다음과 같습니다.

질문

왜 내 div가 포함 div 내에서 가로 중앙에 있지 않습니까?

HTML 예:

<code class="html"><div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div></code>

CSS 예:

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

해결책

가로 중심 정렬을 달성하려면 float 대신 display: inline-block 사용을 고려하세요. 이 방법을 사용하면 너비 및 높이와 같은 블록 수준 속성을 유지하면서 div가 인라인 요소처럼 작동할 수 있습니다.

업데이트된 CSS:

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

이 수정을 통해 div는 div가 포함되어 있습니다.

위 내용은 내 div가 포함된 div 내에서 가로 중앙에 위치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!