Css 我如何将Youtube视频（iframe）集中在twitter bootstrap 3中？

大家好，我正在尝试将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>

---

使用class

col-xs-12文本中心

。您不需要

float:center

因此，改变这一点：

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



到


只需添加中间标记即可

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

我可以用更小的网格将我的嵌入式系统置于中心位置，如下所示：

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


如果使用引导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列）。
用h（1-2-3…）包裹iframe


可能重复@dcc这绝对不是该问题的重复。这个问题是关于如何使用从Twitter框架版本3构建到引导程序中的类。我认为您正在寻找的类是文本中心而不是文本中心欢迎使用堆栈溢出！请添加一些解释，说明此代码为何有助于OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅。如果将文本放置在任何元素上，不只是类会对齐文本吗？为什么您的答案比几年前给出的其他答案更好？您可以将类
col-sm-offset-2
添加到居中div，而不是之前的空div。
<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>

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

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

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