Wie zentriere ich einen Iframe horizontal?

234

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:

Geben Sie hier die Bildbeschreibung ein

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

html css iframe alignment center-align Mischa Moroshko
quelle
6
Warum nicht ein Div für diesen Iframe einwickeln?
Giberno

Antworten:

384

Fügen Sie display:block;Ihrem iframe CSS hinzu.

Alohci
quelle
28
Vielen Dank! Ich hätte inline frame
raten
33
Dafür steht das "i".
Aayush
11
Alternativ können Sie dem Container also eine text-align: centerRegel geben, richtig?
KOVIKO
1
Ja, das Hinzufügen von
Textausrichtung
9
Ich fand, ich musste auch hinzufügenmargin: auto;
MarkyDD
45

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 sind Breite und Höhe die Größe Ihres Iframes auf Ihrer HTML-Seite.

pedro
quelle
1
Ich dachte, das alignAttribut sei veraltet? Warum sollte das OP diesen Ansatz anstelle von CSS verwenden - was ist der Vorteil?
Andrewsi
4
style="text-align:center"ist nicht veraltet und würde den gleichen Job machen
Anthony
Obwohl es abgeschrieben wird, funktioniert dies, während alles andere nicht funktioniert.
user819490
Dies funktioniert in der HTML-Datei und ist daher für Neulinge wie mich einfacher zu implementieren. Ich habe es gerade 2017 gemacht, damit es nicht abgeschrieben werden darf. Danke für den Tipp!
Renel Chesak
20

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;

}
mgraph
quelle
11

Wenn Sie ein Video in den Iframe einfügen und möchten, dass Ihr Layout flüssig ist, sollten Sie sich diese Webseite ansehen: Fluid Width Video

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

Wenn dies Ihr erstes Video ist, ist 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>
Erweitern Sie das Snippet

Und fügen Sie 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%;
}
Erweitern Sie das Snippet

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

Nohl
quelle
Dies dient dazu, das Video im Iframe ansprechbar zu machen, funktioniert einwandfrei, danke!
Ricardo
11

Der einfachste Code zum Ausrichten des iframe-Elements:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
Tushar Soni
quelle
Bitte lesen Sie diese erste Anleitung. Diese Frage wird beantwortet, bevor Sie Ihre Antwort hier hinzufügen können. Sie müssen jedoch einige Punkte verstehen, bevor Sie antworten können. Fügen Sie zunächst keine Antwort hinzu, die zuvor mit demselben Code oder Vorschlag hinzugefügt wurde. Zweitens, fügen Sie keine übermäßig komplizierte Antwort hinzu, wenn der Benutzer sehr spezifisch nach dem Problem gefragt hat und was er zur Lösung dieses Problems benötigt. Drittens können Sie einen Kommentar hinzufügen, wenn Sie etwas zur Antwort oder Frage vorschlagen möchten.
Ankit Suthar
6

Sie können iframe in a einfügen <div>

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

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

Sonal Khunt
quelle
3

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

margin-left: auto;margin-right: auto;
Boussac
quelle
1
Nur wenn für das übergeordnete Element die Textausrichtung des Stils auf Mitte gesetzt ist.
Parvus
3

Du kannst es versuchen 

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

Ich hoffe es ist nützlich für dich

Verknüpfung

Kael
quelle
1

In meinem Fall bestand die Lösung in der iframe-Klasse und fügte hinzu:

    display: block;
    margin-right: auto;
    margin-left: auto;
Nezir
quelle
0

Hier habe ich einen Ausschnitt für alle von Ihnen, die darunter leiden, Iframe oder Bild horizontal in die Mitte des Bildschirms zu stellen. Gib mir THUMBS UP VOTE, wenn du magst. «

style> img & iframe> Dies ist Ihr Tag-Name. Ändern Sie diesen, wenn Sie ein anderes Tag in der Mitte möchten

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>
Erweitern Sie das Snippet

Manthan Patel
quelle