Centering a Youtube iframe?

Question

<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!

score 1 · Accepted Answer · answered Nov 19 '16 at 12:58

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>

Sure :) Please note that the other answers works as well, this was one example. — odedta, Nov 19 '16 at 13:39

score 0 · Answer 2 · answered Nov 19 '16 at 13:08

or use margin: auto width a display: block

iframe {
  width: 80%;
  height: 500px;
  margin: auto;
  display: block;
  }

<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 src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
</section>

score 0 · Answer 3 · answered Nov 19 '16 at 13:13

Use margin:0px auto; display:block;

see snippet below.

section iframe{
  margin:0px auto;
  display:block;
  width:80%;
}

<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>

Centering a Youtube iframe?

3 Answers3