如何在Twitter引導程序3中集中Youtube視頻（iframe）？

您好我正嘗試在Twitter Boostrap 3中將Youtube視頻的iframe居中，目前它左對齊。如何在Twitter引導程序3中集中Youtube視頻（iframe）？

我用下面的HTML：

 <div class="embed-responsive embed-responsive-16by9"> 

     <iframe class="embed-responsive-item" 
     src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" 
     align="center" id="videothumbnail"></iframe> 

     </div>

CSS：

#videothumbnail{ 
    height: 50%; 
    width: 50%; 
    float: center;}

來源

2014-08-29 user3931756

可能重複的[縮小Youtube視頻到響應寬度]（http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width） – davidcondrey 2014-10-05 00:04:40

@dcc這絕對不是一個該問題的重複。這個問題是關於如何使用從Twitter框架第3版內置到Bootstrap中的類。 – wuliwong 2015-01-04 18:53:28

使用類col-xs-12 text-center。你不需要float:center;

所以更改此設置：

<div class="embed-responsive embed-responsive-16by9">

到

<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">

來源

2014-08-29 02:52:33 Dan

我認爲你正在尋找的類是文本中心而不是中心文本 – etoisarobot 2014-12-15 14:05:35

@DKMulligan更新，謝謝指出它 – Dan 2014-12-15 14:35:37

只需添加標籤中心

<center> 
<div class="embed-responsive embed-responsive-16by9"> 
<iframe class="embed-responsive-item" id="videothumbnail" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" align="center"></iframe> 
</div> 
</center>

來源

2014-08-29 03:18:54

我能我中心通過嵌入響應用更小的網格接壤，如下所示：

<div class='row'> 
    <div class='col-sm-2'></div> 
    <div class='col-sm-8'> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div class='col-sm-2'></div> 
</div>

來源

2015-02-28 23:03:54 Emeka

-1

<div class='row text-center'> 


    <div class="embed-responsive embed-responsive-16by9"> 
     <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen> 

     </iframe> 
    </div> 
</div>

來源

2016-07-29 13:59:33 macs

歡迎來到Stack Overflow！請爲此代碼添加一些解釋來幫助OP。這將有助於提供未來觀衆可以從中學習的答案。有關更多信息，請參閱[答案]。 – 2016-07-29 22:32:17

如果使用Bootstrap 4，您可以使用偏移量。

<div class="col-sm-8 offset-md-2 embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" width="750" height="415" src="https://www.youtube.com/embed/{your-video}" frameborder="0" gesture="media" allowfullscreen> 
</iframe> 
</div>

這限制了嵌入到8列，並保持2欄的任何一邊空白（總計12）。

來源

2017-11-26 03:43:41 Dave

如何在Twitter引導程序3中集中Youtube視頻（iframe）？

回答

相關問題