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

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

인라인 블록 요소는 인라인 요소처럼 페이지 인라인으로 흐르지만 특정 너비와 높이를 가질 수 있습니다. 이 동작은 margin:auto;.

이전 코드:

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

이 코드에서 #container 요소는 특정 너비를 가지며 예상되는 가운데 맞춤 동작을 트리거합니다.

새 코드:

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

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

해결책:

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

.center {
    text-align: center;
}

이것은 인라인 블록 요소를 포함하는 블록 요소의 중앙에 정렬합니다.