我如何在 twitter bootstrap 3 中将 Youtube Video (iframe) 居中？

Posted 2023-03-13

【中文标题】我如何在 twitter bootstrap 3 中将 Youtube Video (iframe) 居中？

【英文标题】：How do i center Youtube Video (iframe) in twitter bootstrap 3?

【发布时间】：2014-10-23 00:47:53

【问题描述】：

您好，我正在尝试在 Twitter Boostrap 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;

【问题讨论】：

Shrink a Youtube video to responsive width的可能重复

@dcc 这绝对不是那个问题的重复。这个问题是关于如何使用 Bootstrap from Twitter framework, Version 3 中内置的类。

【参考方案1】：

使用类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">

【讨论】：

我认为您正在寻找的课程是 text-center 而不是 center-text

【参考方案2】：

只需添加中心标签

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

【参考方案3】：

我能够通过用较小的网格将嵌入响应居中，如下所示：

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

【讨论】：

您可以将col-sm-offset-2 类添加到居中的 div 中，而不是之前有一个空的。

【参考方案4】：

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

【讨论】：

欢迎来到 Stack Overflow！请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅How to Answer 了解更多信息。

【参考方案5】：

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

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

这将嵌入限制为 8 列，并将其两侧的 2 列保持为空白（总共 12 列）。

【参考方案6】：

用 h(1-2-3...) 包裹 iframe

<h4 class="text-center">   <iframe ....> </iframe>    </h4>

【讨论】：

如果放置在任何元素上，不只是类会对齐文本吗？为什么你的答案比几年前给出的其他答案更好？