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

여백:자동; 인라인 블록 요소에서는 작동하지 않습니다

인라인 블록 요소는 여백 자동과 관련하여 블록 요소와 다르게 동작합니다. 블록 요소에서는 margin:auto; 요소를 상위 컨테이너 내에서 수평으로 중앙에 배치합니다. 그러나 인라인 블록 요소에서는 margin:auto; 효과가 없습니다.

예:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

이 예에서는 컨테이너 요소가 inline-block으로 설정됩니다. 여백:자동; 요소에 적용되면 상위 컨테이너 내에서 컨테이너를 중앙에 배치하지 않습니다.

해결책:

인라인 블록 요소를 중앙에 배치하려면 텍스트를 사용할 수 있습니다. align: 상위 요소의 중심.

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

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

이제 컨테이너 요소는 중앙 div 내에서 수평 중앙에 배치됩니다.

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