Heim > Artikel > Web-Frontend > 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!