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> 

이 코드가 있습니다. 중간에 Youtube iframe을 가운데 정렬 할 수있는 방법은 없나요? CSS를 사용해 보았지만 알아낼 수는 없습니다.

현재 전체 파일을 볼 수 있습니다 https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html

감사합니다!

Answer 1

랩 iframe이 사업부와 그것을 예를 들어 text-align:center; CSS 속성을 부여 ...

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

Answer 2

또는 사용 margin: auto는 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>

폭

Answer 3

사용 여백 : 0px auto;디스플레이 : 블록;

아래 스 니펫을 참조하십시오.

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>