Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum wird mein Iframe nicht horizontal zentriert?

Linda Hamilton
Freigeben: 2024-10-31 14:01:02
Original
488 Leute haben es durchsucht

 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Aktualisiertes CSS:

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

iframe {
    display: block;
    border-style: none;
}</code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!