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

我的HTML看起来很简单：

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

我尝试了stackoverflow的不同解决方案(它只针对div而不是视频),而我能想到的最好的解决方案是this fiddle.

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

width: 50%;
margin: 0 auto;

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

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

a fiddle

HTML

<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 is here.

编辑

这些天我大多使用这个：

直接的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％本身.整齐.

在diveboard上,我们制作了一个很棒的photoswipe黑客来支持视频

一切顺利,直到我发现Firefox 11和12测试版没有播放嵌入的YouTube视频…看起来它们已经加载,我们可以听到声音广告没有图像…所以它是youtube radio而不是
你可以在这里看到一个例子：Video example page

而且我一直在摸着我的头,但我很无能:(

请参阅 this fiddle.在加载border-radius之前马上通知工作正常.几毫秒后,圆角消失.

如何在嵌入式YouTube影片中加入圆角？

你只需要设置你的边框样式：

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

使用Bootstrap，我有一个网格列类=“col-lg-3”，我想把它放在位置：固定，而另一个.col-lg-9是正常位置(可滚动通过页面)。

<div>
    <div>
        Fixed content
    </div>
    <div>
        normal scrollable content
    </div>

</div>

就像在LifeHacker.com左栏一样
你会看到左边的部分是固定的，但我滚动页面。

我使用bootstrap v3.1.1

<div>
    <div>
       <div>
           fixed position 
        </div>
    </div>
    <div>
       normal data enter code here
    </div>
</div>

我想更改☰颜色。

HTML：

<button type="button"data-toggle="collapse" data-target="#menu">
  <span>Toggle menu navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

我尝试了各种东西(看下面)，但没有什么工作。

CSS：

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

你的CSS不工作的原因是因为 specificity. Bootstrap选择器具有比你的特性更高，所以你的风格被完全忽略。

引导样式使用选择器：.navbar-default .navbar-toggle .icon-bar。此选择器的B特异性值为3，而您的B特异性值仅为1。

因此，要覆盖这一点，只需在CSS中使用相同的选择器(假设你的CSS包括在Bootstrap的后面)：

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}