Warum wird mein iFrame nicht horizontal zentriert und wie kann ich das Problem beheben?

Horizontales Zentrieren eines iFrames

Abfrage:

Beachten Sie den folgenden Codeausschnitt:

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

Warum kann das iFrame-Element im Gegensatz zum umgebenden div nicht zentral ausgerichtet werden? Wie kann das behoben werden?

Antwort:

Um einen iFrame horizontal zu zentrieren, wenden Sie den display: block; Eigenschaft zu seinem CSS hinzufügen. Hier ist der überarbeitete Code:

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

The display: block; Die Eigenschaft legt fest, dass sich der iFrame wie ein Element auf Blockebene verhält und sicherstellt, dass er eine eigene Zeile einnimmt und sich horizontal an anderen Inhalten ausrichtet. Zusätzlich border-style: none; Entfernt den Standardrahmen des iFrames, um das Erscheinungsbild eines zentrierten Rahmens beizubehalten.

Das obige ist der detaillierte Inhalt vonWarum wird mein iFrame nicht horizontal zentriert und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!