귀하의 기사에 적합한 몇 가지 질문 기반 제목은 다음과 같습니다. * 내 Iframe이 Div에서 수평으로 중앙에 배치되지 않는 이유는 무엇입니까? * Div 내에서 Iframe을 중앙에 배치하는 방법: 간단한 솔루션 * Iframe Hori 중심 맞추기

Iframe을 Div 내에서 수평으로 가운데에 배치하는 방법

소개:

iframe을 가운데에 배치 div 내에서 수평으로 배치하는 것은 일반적인 CSS 레이아웃 문제일 수 있습니다. 이 기사에서는 문제를 살펴보고 이러한 정렬을 달성하기 위한 솔루션을 제공할 것입니다.

문제:

코드 예제에 설명된 것처럼 iframe은 정의된 너비와 "여백: 0 자동;"이 있음에도 불구하고 가로 중앙에 표시되지 않습니다. 이는 iframe이 본질적으로 인라인 요소이므로 div 컨테이너와 유사하게 동작하지 않기 때문입니다.

해결책:

iframe을 중앙에 배치하려면 표시 속성을 변경해야 합니다. "차단"합니다. 이렇게 하면 iframe이 블록 수준 요소처럼 동작하여 "margin: 0 auto;"를 허용합니다. 속성을 적용하고 여백을 균등하게 분배합니다.

코드 예:

아래 수정된 CSS 코드는 iframe을 가로로 중앙에 배치합니다.

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

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

"display: block;"을 추가하여 iframe CSS에 추가하면 이제 iframe이 상위 div 컨테이너 중앙에 가로로 정렬됩니다.

위 내용은 귀하의 기사에 적합한 몇 가지 질문 기반 제목은 다음과 같습니다. * 내 Iframe이 Div에서 수평으로 중앙에 배치되지 않는 이유는 무엇입니까? * Div 내에서 Iframe을 중앙에 배치하는 방법: 간단한 솔루션 * Iframe Hori 중심 맞추기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!