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

问题描述

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

我的 html 看起来很简单:

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

我尝试了来自 stackoverflow 的不同解决方案(它只解决了使 div 居中，而不是视频的问题)，我能想到的最好的解决方案是 这个小提琴.

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

宽度:50%；边距:0 自动；

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

解决方案

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

小提琴

HTML

<img src="http://placehold.it/1120x630&text=假装视频 560x315" alt=""/>

CSS

/* 关键的东西 */.your-center-div {宽度:560px；/* 你必须有一个尺寸，否则这个方法不起作用 */高度:315px；/* 考虑改为使用这些 max-width - 可能会给你更多的响应能力 */位置:绝对；/* 位置不在流中，但根据最近的父级 */顶部:0；右:0；/* 我猜是混淆了 */底部:0；左:0；保证金:自动；/* 使它们相等 */}

完全正常运行 jsFiddle 在这里.

编辑

这些天我主要使用这个:

直接 CSS

.center-thing {位置:绝对；保证金:自动；顶部:50%；左:50%；变换:翻译(-50%，-50%)；}

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

center-center()绝对()保证金自动前 50%还剩 50%变换 翻译(-50%,-50%)

这样...你不需要知道元素的大小 - 翻译是基于它的大小 - 所以，-50%.整洁.

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.

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>

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.

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

width: 50%;
margin: 0 auto; 

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?

解决方案

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

a fiddle

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 */
}

Fully working jsFiddle is here.

EDIT

I mostly use this these days:

straight CSS

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

if your use stylus/mixins ( you should... it's the best )

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-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屋！