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

我有這段代碼。任何方式，我可以中間Youtube iframe中間？我試過CSS，但無法弄清楚。居中Youtube iframe？

你可以在這裏查看整個文件：https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html

謝謝！

來源

2016-11-19 Giacomo Lawrance

裹的iframe有一個div，並給它例如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>

來源

2016-11-19 12:58:46 odedta

真棒，真的很好！非常感謝。 –

當然:)請注意，其他答案也適用，這是一個例子。 – odedta

或使用margin: auto寬度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>

來源

2016-11-19 13:08:24 Pedram

使用margin：0px auto;顯示：block;

查看下面的代碼片段。

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>

來源

2016-11-19 13:13:16

居中Youtube iframe？

回答

相關問題