Warum wird mein Iframe nicht horizontal zentriert?

So zentrieren Sie einen Iframe horizontal

Die ursprüngliche Frage hob ein Szenario hervor, in dem ein Iframe nicht zentral innerhalb seines übergeordneten Divs ausgerichtet war. Die Ursache dieses Problems und die Lösung werden unten beschrieben.

Iframe wird nicht richtig zentriert

Im bereitgestellten HTML- und CSS-Code wird der Iframe neben einem Div gerendert Verwenden ähnlicher Eigenschaften für Breite, Höhe, Rand und Hintergrundfarbe. Allerdings wird der Iframe nicht wie das Div zentral ausgerichtet. Dies liegt daran, dass Iframes von Natur aus Inline-Elemente sind, was bedeutet, dass sie nur so viel Platz einnehmen wie ihr Inhalt.

Lösung: „display:block;“ hinzufügen

Zur zentralen Ausrichtung B. einen Iframe, muss dieser von einem Inline-Element in ein Blockelement konvertiert werden. Dies kann durch Hinzufügen der folgenden CSS-Eigenschaft zum iframe erreicht werden:

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

Zusätzliche Optimierungen

Zusätzlich, um die richtige Ausrichtung sicherzustellen und zu verhindern, dass Rahmen angezeigt werden Im Iframe kann das folgende CSS angewendet werden:

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

Aktualisiertes CSS:

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

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

Durch die Implementierung dieser Änderungen wird der Iframe jetzt horizontal innerhalb zentriert seine übergeordnete Div.

Das obige ist der detaillierte Inhalt vonWarum wird mein Iframe nicht horizontal zentriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!