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?

— Mischa Moroshko
quelle

6

Warum nicht ein Div für diesen Iframe einwickeln?

— Giberno

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