Giacomo Lawrance Giacomo Lawrance - 13 days ago 5
CSS Question

Centering a Youtube iframe?

<section>
<h3>About us</h3>
<p>British Airways virtual is one of the largest virtual airlines for Infinite Flight virtual airlines out there. With over 50 pilots, we have a bustling community. Make sure to come over and join us, and experience it for yourself!<br><br>
Check out the <a href="about.html">about page</a> for more info!</p><br>
<iframe width="80%;" height="500px;" src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
</section>


I have this code. Any way I can centre the Youtube iframe in the middle? I have tried CSS, but can't figure it out.

You can view the whole file here: https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html

Thank you!

Answer

Wrap the iframe with a div and give it a text-align:center; css property for example...

.divy {
  text-align: center;
}
<section>
    <h3>About us</h3>
     <p>British Airways virtual is one of the largest virtual airlines for Infinite Flight virtual airlines out there. With over 50 pilots, we have a bustling community. Make sure to come over and join us, and experience it for yourself!<br><br>
       <div class="divy">
       Check out the <a href="about.html">about page</a> for more info!</p><br>
       <iframe width="80%;" height="500px;" src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
  </div>
</section>

Comments