我正在尝试将使用 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=PLOStnEM8wBObKeWWFuh5zqac5d8XMZcfe"></iframe> </div>
我需要更改 CSS 吗?我在这里缺少什么吗?
这是我遇到问题的地方。 startupmarketing.tammycamp.com
我实际上尝试了这里的所有选项,但没有一个有效:
How do i center Youtube Video (iframe) in twitter bootstrap 3?
最佳答案
您应该使用 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
下课上类
关于html - 如何居中响应嵌入 bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40832086/