Warum wird mein Iframe nicht zentriert? (Der „display'-Property-Fix)

Horizontale Zentrierung von Iframes

Wenn Sie auf einen Iframe stoßen, der trotz Verwendung von margin: 0 auto; nicht horizontal zentriert ist, kann das Problem daran liegen in der display-Eigenschaft des iframe. Standardmäßig verfügen Iframes über eine Inline-Anzeige, die verhindert, dass sie an Elementen auf Blockebene wie Divs ausgerichtet werden.

Um dieses Problem zu beheben und den Iframe horizontal zu zentrieren, fügen Sie die folgende CSS-Regel hinzu:

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

Diese Änderung setzt die Anzeigeeigenschaft des Iframes auf Block, sodass er sich wie ein Element auf Blockebene verhält. Folglich wird der Iframe jetzt korrekt horizontal am umgebenden Div ausgerichtet.

Daher zentriert der folgende aktualisierte CSS-Code sowohl das Div als auch 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>

Das obige ist der detaillierte Inhalt vonWarum wird mein Iframe nicht zentriert? (Der „display'-Property-Fix). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!