Mein iframe wird einfach nicht zentriert

Ich habe versucht, mit einem Div den Iframe zu zentrieren, funktioniert nicht. Ich habe ungefähr 20 verschiedene Posts durchgemacht und keiner hat gearbeitet. HierMein iframe wird einfach nicht zentriert

ist der Code:

center { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<center> 
 
    <iframe src="gallery.html" width="100%" style="height:100vh";></iframe> 
 
</center>

Bin ich etwas fehlt?

Quelle

2016-08-27 Oliver Morgan

Cool, froh, dass es für Sie arbeitet. Könnten Sie bitte meine Antwort als akzeptiert für diese Frage markieren? :) – Nhan

Fertig :) Nur eine kurze Frage. Es funktioniert perfekt auf dem Desktop, aber auf Mobilgeräten ist der iframe-Bereich sehr groß und verbraucht viel nutzlosen Platz. Ich rate es weil die 100vh. Aber wenn ich es auf% setze, ist es wirklich klein. –

Wenn ich zu% Einheiten gewechselt habe, nimmt es immer noch die gleiche Höhe ein. Wenn Sie jedoch die Größe auf Mobilgeräten verringern möchten, verwenden Sie Medienabfragen und legen Sie eine bestimmte Größe für kleinere Bildschirmgrößen fest. Hier ein Blick auf dieses Snippet, hoffe es hilft https://jsfiddle.net/0jxpb5rs/ – Nhan

Ich denke diese Lösung ist was Sie wollen.

Reduzieren Sie die Größe der iframe, setzen Sie width und text-align auf das Containerelement.

.centered { 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div class="centered"> 
 
    <iframe src="gallery.html" width="80%" style="height:100vh";></iframe> 
 
</div>

Quelle

2016-08-27 18:15:44 Nhan

Das hat ein bisschen geholfen, es bewegt es leicht nach rechts. Aber anstatt 1/2 zu sein, ist es etwa 1/5 Weg –

-1

center-Tag ist bereits eine zentrierte Position, Sie müssen nicht css eingeben.

Versuchen Sie es einfach, es kann Ihnen helfen.

<center><iframe src="https://www.google.com" width="120" style="height:100vh";></iframe></center>

Quelle

2016-08-27 17:58:11 Yasir

Nein, das Center-Tag ist seit ein paar Jahren veraltet, müssen Sie verwenden css – mlegg

Seine abgeschrieben, aber Sie können es verwenden, oder wenn Sie es in CSS verwenden möchten, dann .center { text-align: center;} Es wird Arbeit für Sie sein. – Yasir

Ich denke, Sie sollten versuchen, Ihre iframe mit Flexbox Zentrierung.

.flex-wrap { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
} 

<div class="flex-wrap"> 
    <div> 
     <iframe src="https://www.google.com" width="120" style="height:100vh";></iframe> 
    </div> 
<div>

Quelle

2016-08-27 19:10:30

Dies zentriert es, aber es ist winzig. so winzig, dass es überhaupt nichts anzeigen kann –

Mein iframe wird einfach nicht zentriert

Antwort

Verwandte Themen