인라인 블록 요소에서 `margin: auto;`가 작동하지 않는 이유는 무엇입니까?

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

CSS에서는 margin:auto; 일반적으로 페이지의 블록 요소를 가로 중앙에 배치하는 데 사용됩니다. 그러나 인라인 블록 요소에 적용하면 이 속성은 효과가 없습니다.

인라인 블록 요소는 인라인 요소처럼 페이지 인라인으로 흐르지만 특정 너비와 높이를 가질 수 있습니다. 이 동작은 margin:auto;를 사용하여 수평으로 중앙에 맞추려고 할 때 어려움을 야기합니다.

이전 코드:

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

이 코드에서 #container 요소에는 특정 너비를 지정하고 예상되는 중앙 정렬 동작을 트리거합니다.

새 코드:

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

#container의 표시 속성을 inline-block으로 변경하면 여백과 상호 작용하는 방식이 변경됩니다. 인라인 블록 요소는 블록 요소처럼 동작하지 않으며 margin:auto;를 사용하여 가운데에 맞추는 기능을 잃습니다.

해결책:

인라인 블록 요소를 가운데에 맞추려면 가로로 사용하려면 포함 요소에 text-align: center 속성을 대신 사용하세요.

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

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

이렇게 하면 인라인 블록 요소가 포함 블록 요소의 중앙에 정렬됩니다.

위 내용은 인라인 블록 요소에서 `margin: auto;`가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!