HTML-Center-iFrame

Dieser Beitrag befasst sich mit vielen Methoden zum Zentrieren eines iFrames in einem HTML-Dokument. Das Element iframe definiert einen Inline-Frame.

Verwenden Sie einen Inline-Frame, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten.

iFrame in HTML zentrieren

1. display : block – Der Rendering-Box-Typ (Anzeigeverhalten) eines Elements wird durch das Attribut display angegeben. display: block zeigt ein block-Element wie ein Absatzelement für ein Element an. Es füllt die gesamte Breite aus und beginnt auf einer neuen Zeile.
2. text-align : center - Der innere Inhalt eines block-Elements wird mit dem CSS-Attribut text-align ausgerichtet. Dies sind die üblichen Werte für text-align: left, was der Standardwert ist. Die linke Seite des Inhalts wird ausgerichtet.

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<div>div</div>
<iframe class="iFrame" src="data:,iframe"></iframe>

<hr>

<div id="all">
    <div>div</div>
    <iframe src="data:,iframe"></iframe>
</div>

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

.iFrame {
    display: block;
    border-style: none;
}

#all{
    width: 150px;
    text-align: center;
}

Im vorherigen Beispiel haben wir zwei div mit iframe definiert. Wir haben den iframe mit dem display: block; Attribut im ersten div und dann angewendet text-align: center; zum zweiten iframe, nachdem Sie es in ein übergeordnetes div eingeschlossen haben.