Hier sind einige fragenbasierte Titel, die zu Ihrem Artikel passen: * Warum wird mein Iframe nicht horizontal in einem Div zentriert? * So zentrieren Sie einen Iframe innerhalb eines Div: Eine einfache Lösung * Zentrieren eines Iframe Hori

So zentrieren Sie einen Iframe innerhalb eines Div horizontal

Einführung:

Zentrieren eines Iframes horizontal innerhalb eines div kann eine häufige Herausforderung beim CSS-Layout sein. In diesem Artikel werden wir das Problem untersuchen und eine Lösung bereitstellen, um diese Ausrichtung zu erreichen.

Das Problem:

Wie im Codebeispiel dargestellt, kann ein Iframe erscheint trotz definierter Breite und „margin: 0 auto;“ nicht horizontal zentriert. Dies liegt daran, dass Iframes von Natur aus Inline-Elemente sind und sich daher nicht ähnlich wie Div-Container verhalten.

Lösung:

Um den Iframe zu zentrieren, müssen wir seine Anzeigeeigenschaft ändern „blockieren“. Dadurch verhält sich der Iframe wie ein Element auf Blockebene, sodass „margin: 0 auto;“ Eigenschaft, um wirksam zu werden und die Ränder gleichmäßig zu verteilen.

Codebeispiel:

Der geänderte CSS-Code unten zentriert den Iframe horizontal:

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

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

Durch Hinzufügen von „display: block;“ Gemäß dem Iframe-CSS wird der Iframe jetzt horizontal in der Mitte seines übergeordneten Div-Containers ausgerichtet.

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Titel, die zu Ihrem Artikel passen: * Warum wird mein Iframe nicht horizontal in einem Div zentriert? * So zentrieren Sie einen Iframe innerhalb eines Div: Eine einfache Lösung * Zentrieren eines Iframe Hori. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!