2017-12-14 3 views
-1

Ich versuche, die Animation auf das Zentrum auszurichten, habe ich versucht mit CSS, nichts scheint zu arbeiten, habe ich sogar versucht, Padding und Ränder zu überprüfen, ob irgendwelche Änderungen passieren, aber Sie nicht.Ausrichten <iframe> Tag zu zentrieren in HTML & CSS

https://gyazo.com/b5b6b9f64e01ccfb107a63470ec5a544

Im ersten Gyazo verknüpft es aber unten in meinem Screenshot zentriert sieht, wenn ich die Web-Seite zu laden, ist es überhaupt nicht zentriert.

https://gyazo.com/f920e6004c39dc19eaadbe5f73abd7ae

Sorry, dass es in Gyazo Links ist, habe ich versucht, die JSFiddle Link zu laden, aber ich konnte nicht herausfinden, wie man den Code mit allen 4 Einzüge usw. laden, so dass ich hoffe, Sie haben alle benötigten Information.

Antwort

1

Das übergeordnete div muss 100% Breite haben und Text zentriert ausrichten. Das Kind muss nur über Höhe/Breite nachdenken.

// css 
.parent { 
    width: 100%; 
    text-align: center; 
} 

.child { 
    width: 300px; 
    height: 200px; 
} 

// html 
<div class='parent'> 
     <iframe class='child' src="https://www.youtube.com/embed/xLkHEZTSeoU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> 
</div> 
+0

Also schrieb ich es genau, wie Sie es haben, und keine Änderungen vorgenommen wurden. Es ist immer noch auf der linken Seite der Seite fest. – Ollie4735

+0

Ich habe hier ein Arbeitsbeispiel hinzugefügt, das du auf deinen Rechner klonen und in deinem Browser ausführen kannst: https://github.com/AkyunaAkish/align-iframe –

+0

Danke, das hat funktioniert! Ich glaube, es hätte das allow = "encrypted-media" sein können, weil ich etwas gesucht und gelesen habe, was mit Firefox zu tun hat, und iframe ist nicht kompatibel, aber nicht ganz sicher. Aber danke. – Ollie4735