如何在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）？

回答

相关问题