html - 如何居中响应嵌入 bootstrap 3

Question

我正在尝试将使用 bootstrap 3 开发的布局居中，无论我从以前的线程中尝试什么，它似乎都没有居中。

我目前将此作为代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 text-center"> <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM‌​8wBObKeWWFuh5zqac5d8‌​XMZcfe"></iframe> </div>

我需要更改 CSS 吗？我在这里缺少什么吗？

这是我遇到问题的地方。 startupmarketing.tammycamp.com

我实际上尝试了这里的所有选项，但没有一个有效:

How do i center Youtube Video (iframe) in twitter bootstrap 3?

Answer 1

您应该使用 center-block类不是text-center使用 bootstrap 将 div 居中。文本中心将使文本居中，您需要容器。

您还想将它应用到类为 embed-responsive 的 div 中以便它在行内居中。

信息:http://getbootstrap.com/css/#helper-classes-center

编辑:查看您的代码现在是如何设置的。删除您当前拥有的内容并将其替换为以下内容:

<div class="row">
    <div class="embed-responsive embed-responsive-16by9 center-block" style="max-width: 853px;">
    <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM8wBObKeWWFuh5zqac5d8XMZcfe"></iframe>
    </div>
</div>

如您所见，我们正在包装嵌入 div在.row类，我们正在添加 max-width:853px 的内联样式匹配您的 iframe元素大小。这允许浏览器计算 child 的大小 div在row类并允许内置 Bootstraps .center-block下课上类