왜 'margin: auto;' 인라인 블록 요소를 수평으로 중앙에 배치하지 않습니까?

여백:자동; 인라인 블록 요소

margin:auto; 적용 시 인라인 블록 디스플레이를 사용하는 div에 추가하면 예상대로 div가 수평으로 중앙에 배치되지 않을 수 있습니다. 이는 인라인 블록 요소가 페이지를 따라 흐르는 인라인 요소처럼 동작하기 때문에 발생합니다.

제공된 코드에서:

이전 코드(작동)

<code class="css">#container {
  width: 200px;
  ...
}</code>

div에는 특정 너비가 지정되어 상위 컨테이너에 맞도록 합니다.

새 코드(작동하지 않음)

<code class="css">#container {
  display: inline-block;
  ...
}</code>

설정 display: inline-block을 사용하면 내용에 따라 div가 축소되거나 커지므로 정렬이 잘못될 수 있습니다.

div를 중앙에 배치하려면 코드에 다음이 필요합니다.

해결책

1. 텍스트 정렬 추가: center; 포함 요소(예제에서는 .center)에 추가합니다.

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

이렇게 하면 인라인 블록 div가 중앙에 배치됩니다.

<code class="html"><div class="center">
  <div class="MtopBig" id="container">...</div>
</div></code>

위 내용은 왜 'margin: auto;' 인라인 블록 요소를 수평으로 중앙에 배치하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!