it-swarm.com.de

Wie zentriere ich einen Iframe horizontal?

Betrachten Sie das folgende Beispiel: ( Live-Demo )

HTML:

<div>div</div>
<iframe></iframe>

CSS:

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

Ergebnis:

enter image description here

Warum ist das iframe nicht zentral ausgerichtet wie das div? Wie könnte ich es zentral ausrichten?

214
Misha Moroshko

Hinzufügen display:block; zu Ihrem Iframe-CSS.

355
Alohci

der beste und einfachere Weg, einen Iframe auf Ihrer Webseite zu zentrieren, ist:

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

dabei entsprechen Breite und Höhe der Größe Ihres Iframes auf Ihrer HTML-Seite.

32
pedro

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}
19
mgraph

Wenn Sie ein Video in den iframe einfügen und Ihr Layout flüssig sein soll, sollten Sie sich diese Webseite ansehen: Fluid Width Video

Abhängig von der Videoquelle und wenn Sie möchten, dass alte Videos ansprechen, muss sich Ihre Taktik ändern.

Wenn dies Ihr erstes Video ist, finden Sie hier eine einfache Lösung:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Und füge diese CSS hinzu:

.videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
}
.videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

Haftungsausschluss: Nichts davon ist mein Code, aber ich habe es getestet und war mit den Ergebnissen zufrieden.

10
Nohl

Der einfachste Code zum Ausrichten des iframe-Elements:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
9
Tushar Soni

Sie können iframe in einen <div>

<div>
    <iframe></iframe>
</div>

Es funktioniert, weil es sich jetzt in einem Blockelement befindet.

6
Sonal Khunt

Gemäß http://www.w3schools.com/css/css_align.asp legt das automatische Einstellen des linken und rechten Randes fest, dass der verfügbare Rand gleichmäßig aufgeteilt werden soll. Das Ergebnis ist ein zentriertes Element:

margin-left: auto;margin-right: auto;
3
boussac

Du kannst es versuchen

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

Ich hoffe, es ist nützlich für Sie

Link

3
Kael