Heim  >  Artikel  >  Web-Frontend  >  Warum wird mein Iframe nicht horizontal zentriert?

Warum wird mein Iframe nicht horizontal zentriert?

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 14:01:02476Durchsuche

 Why Doesn't My Iframe Center Horizontally?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn