如何在引导程序中将YouTube嵌入式视频与中心对齐

Question

我试图在我的引导页面中将YouTube嵌入式视频与页面中心对齐.视频的大小始终相同.

我的HTML看起来很简单:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

我尝试了stackoverflow的不同解决方案(它只针对div而不是视频),而我能想到的最好的解决方案就是这个小提琴.

我已经尝试过solution1,solution2,solution3但没有结果.另一个部分成功的解决方案是使用:

width: 50%;
margin: 0 auto; 

它在桌面上运行良好,但在iPad或手机上失败(视频部分在屏幕之外).如何在桌面/平板电脑/手机中正确居中视频？

Answer 1

需要注意的重要事项/"Bootstrap"只是一堆CSS规则

一个小提琴

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* key stuff */
.your-centered-div {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

    position: absolute; /* positions out of the flow, but according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}

完全工作的jsFiddle就在这里.

编辑

这些天我大多使用这个:

直接的CSS

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如果你使用手写笔/ mixins(你应该...它是最好的)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

这样......你不需要知道元素的大小 - 而翻译是基于它的大小 - 所以,它本身的-50%.整齐.

Answer 2

Youtube使用iframe.您只需将其设置为:

iframe {
   display: block;
   margin: 0 auto;
}

Answer 3

<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>