Wie wird ein Iframe horizontal (in der Mitte des Bildschirms) mit CSS ausgerichtet?

Question

Ich einbetten ein YouTube-Video in eine iFrame, die ich in einem Div setzen. Das Problem, mit dem ich es momentan zu tun habe, ist, dass ich den Text horizontal ausrichten kann (in der Mitte), aber nicht den iframe.

Dies ist der Code, den ich dies machen folgende Zwecke verwendet:

HTML

<div id="box-logo"> 
    <img src="Content/Media/red_package.png" /> 
    <span>Quem somos?</span> 

    <iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" 
      frameborder="0" 
      allowfullscreen></iframe> 
</div> 

CSS

#box-logo { 
margin-top: 40px; 
text-align: center; 
} 

#box-logo img { 
    background-color: red; 
    border: 5px solid red; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
} 

#box-logo span { 
    color: red; 
    font-family: Calibri; 
    font-size: 24px; 
} 

#box-logo iframe { 
    display: block; 
    width: 895px; 
    height: 435px; 
} 

Ich habe nach mehreren Tipps gesucht und konnte keinen finden, der mein Problem lösen könnte.
Ich würde gerne Ihre Vorschläge hören, um sie auszuprobieren!

Vielen Dank im Voraus,
Granvic

Answer 1

Sie müssen den Rand Ihres #box-logo iframe-0 auto gesetzt.

Dies ist, weil Sie das Element mit der display Eigenschaft auf block festgelegt haben, so dass es die gesamte Zeile dauert. Wie Sie die width auf bestimmte Menge von px setzen, gibt es etwas freien Platz in der Zeile. Einstellung margin: 0 auto Sie zeigen an, dass der freie Platz gleichmäßig auf jede Seite des div aufgeteilt werden muss.

Wenn Sie die iframedisplay Eigenschaft auf inline oder inline-block eingestellt haben, würde dies nicht funktionieren. So erhalten Sie die div zentriert, in dieser Situation sollten Sie text-align: center-#box-logo

Hier wenden Sie eine Geige haben: https://jsfiddle.net/g2s384L2/

Answer 2

Sie können wie dieses Set

<iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen="" style="width: 600px;height: 300px; 
display: inline-block;"></iframe> 

Answer 3

Sie müssen nur aktualisieren Sie Ihre CSS mit

iframe {display:inline-block;} 
span {display:block;} 

https://jsfiddle.net/wpnjk2rf/

Answer 4

Sie können auch die iframe mithilfe dieser Code

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe width="420" height="315" src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen></iframe> 
 
</div>