HOWTO · HTML

HTML-Center-iFrame

Im heutigen Beitrag lernen wir, wie man einen iFrame in HTML zentriert.

Von ShraddhaVeröffentlicht 2023-06-20Aktualisiert 2023-06-20

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.

Über den Autor

Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

Autorenprofil ansehen
LinkedIn