다음은 기사 내용과 일치하는 몇 가지 영어 질문과 답변 제목입니다. 1. **인라인 블록 요소에서 `margin: auto`가 작동하지 않는 이유는 무엇입니까?** 2. **`margin: auto` 없이 인라인 블록 요소를 중앙에 배치하는 방법은 무엇입니까?** 3. **Margin: Inline-Bl의 경우 자동 실패하는 이유-CSS 튜토리얼-php.cn

다음은 기사 내용과 일치하는 몇 가지 영어 질문과 답변 제목입니다. 1. **인라인 블록 요소에서 `margin: auto`가 작동하지 않는 이유는 무엇입니까?** 2. **`margin: auto` 없이 인라인 블록 요소를 중앙에 배치하는 방법은 무엇입니까?** 3. **Margin: Inline-Bl의 경우 자동 실패하는 이유

Barbara Streisand

풀어 주다： 2024-10-26 04:29:02

원래의

883명이 탐색했습니다.

以下是几个符合文章内容的英文问答类标题：

1. **Why Doesn't `margin: auto` Work on Inline-Block Elements?**
2. **How to Center Inline-Block Elements Without `margin: auto`?**
3. **Why Does Margin: Auto Fail for Inline-Block Elements and How to Fix It?**
4. **Centering Inlin

인라인 블록 요소에서 margin: auto 작업이 수행되지 않는 이유는 무엇입니까?

CSS에서는 margin: auto 속성을 사용하여 요소 주위에 균일한 공백을 만듭니다. 그러나 인라인 블록 요소에 이 속성을 적용하면 작동하지 않을 수 있습니다. 이는 인라인 블록 요소가 텍스트 요소와 매우 유사하게 페이지에서 흐르기 때문입니다.

display: inline-block 스타일을 요소에 할당하면 페이지에서 단일 단어나 이미지로 흐르기 시작합니다. 따라서 margin: auto는 요소 자체가 전체 수평 공간을 차지하지 않기 때문에 균일한 공백을 생성할 수 없습니다.

이 문제를 해결하려면 인라인 블록 요소를 직접 중앙에 배치하는 대신 컨테이너 요소의 정렬을 중앙(text-align: center)으로 설정해야 합니다. 컨테이너 요소는 전체 수평 공간을 차지하며 내부의 인라인 블록 요소를 중앙에 배치합니다.

고정 코드 예:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}</code>

로그인 후 복사

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

로그인 후 복사

이 방법을 사용하면 인라인 블록 요소가 더 이상 margin: auto 속성에 의해 직접 제어되지 않더라도 성공적으로 중앙에 배치됩니다.

위 내용은 다음은 기사 내용과 일치하는 몇 가지 영어 질문과 답변 제목입니다. 1. **인라인 블록 요소에서 `margin: auto`가 작동하지 않는 이유는 무엇입니까?** 2. **`margin: auto` 없이 인라인 블록 요소를 중앙에 배치하는 방법은 무엇입니까?** 3. **Margin: Inline-Bl의 경우 자동 실패하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!