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使用引导程序使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元素大小。这允许浏览器计算div类中的子row的大小，并允许内置.center-block类的Bootstraps工作

Answer 2

我在看你的源代码。尝试在div周围添加一个容器，并使用center-block将其集中在容器中。为了使bootstrap正常工作，如果使用网格系统，则需要.container或.container-fluid类。

如何集中响应嵌入式引导程序3

2 个答案: