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 중국어 웹사이트의 기타 관련 기사를 참조하세요!