내 Iframe 센터가 수평으로 정렬되지 않는 이유는 무엇입니까?

Iframe을 가로로 가운데에 맞추는 방법

원래 질문에서는 iframe이 상위 div 내에서 중앙에 정렬되지 않는 시나리오를 강조했습니다. 이 문제의 원인과 해결 방법은 아래에 설명되어 있습니다.

Iframe이 중앙에 제대로 배치되지 않습니다

제공된 HTML 및 CSS 코드에서 iframe은 div와 함께 렌더링됩니다. 너비, 높이, 여백 및 배경색에 유사한 속성을 사용합니다. 그러나 iframe은 div처럼 중앙에 정렬되지 않습니다. 이는 iframe이 본질적으로 인라인 요소이기 때문에 콘텐츠만큼만 공간을 차지한다는 의미입니다.

해결책: 'display:block;'을 추가하세요.

중앙 정렬하려면 iframe을 인라인 요소에서 블록 요소로 변환해야 합니다. iframe에 다음 CSS 속성을 추가하면 됩니다.

<code class="css">display: block;</code>

추가 조정

또한 적절한 정렬을 보장하고 테두리가 표시되지 않도록 방지합니다. iframe에 다음 CSS를 적용할 수 있습니다.

<code class="css">border-style: none;</code>

업데이트된 CSS:

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>

이러한 변경 사항을 구현하면 iframe이 이제 iframe 내에서 가로 중앙에 배치됩니다. 상위 div.

위 내용은 내 Iframe 센터가 수평으로 정렬되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!