如何在引导程序的中心对齐YouTube嵌入式视频 [英] How can I align YouTube embedded video in the center in bootstrap

问题描述

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

I am trying to align YouTube embedded video in the center of the page in my bootstrap page. The size of the video is always the same.

我的html看起来非常简单:

My html looks really simple:

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

我尝试了与stackoverflow不同的解决方案(该解决方案仅解决了div居中问题，而不是视频问题)，我能想到的最好的解决方法是

I tried different solutions from stackoverflow (which addressed just centering a div, not a video) and the best I was able to came up with was this fiddle.

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

I already tried solution1, solution2, solution3 but with no result. Another partially successful solution was to use:

width: 50%;
margin: 0 auto; 

在台式机上运行良好，但在iPad或电话上运行失败(视频部分显示在屏幕外).如何在台式机/平板电脑/手机中将视频正确居中?

It worked nicely on desktop, but failed on iPad or a phone (the video went partially outside of a screen). How is it possible to center the video properly in desktop/tablet/phone?

推荐答案

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

An important thing to note / "Bootstrap" is just a bunch of CSS rules

小提琴

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

/* 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在这里.

这几天我主要使用:

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

如果您使用手写笔/混合器(您应该...最好)

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

这样，您不需要知道元素的大小-转换是基于元素的大小的-因此，它本身的-50％.整洁.

This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.

这篇关于如何在引导程序的中心对齐YouTube嵌入式视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！