Question

好的，我知道已经多次询问过，但我没有找到跨浏览器的解决方案，也没有得到它的支持。： - （

我有这段代码可以将视频缩放到100％的浏览器宽度：

<div id="flashposition"><div id="flashvimeo"class="vimeo">HereIsTheVideo</div></div>

和这个css：

#flashposition {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0px;
height: 0;
z-index:30;
display: block;
overflow:hidden;
}

#flashvimeo object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

它可以工作，但是会切断底部多余的高度，但我希望它能够居中，所以视频的多余高度在顶部和底部都会减半。

任何安全且可在IE7中运行的想法？或者是在js / jquery中执行此操作的唯一方法，并且由于浏览器窗口大小（例如此处http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php）而重新计算高度/宽度？

Answer 1

不幸的是，没有优雅的跨浏览器，没有脚本的向后兼容解决方案。

然而，CSS3支持使用box-orient: horizontal;的box-flex，它可以完全按照您的要求进行操作。对CSS3的浏览器支持仍然有点薄，所以如果你想要一个适合每个人的解决方案，你需要使用窗口调整大小事件和布局与脚本。

HTML 5 Rocks - flexbox

Answer 2

这个答案可能令人作呕，但我发现使用表格元素更容易和跨浏览器的方式垂直居中html / css中的任何元素。其他方法是使用JS计算容器高度然后定位。

Answer 3

这个技巧非常好： http://css-tricks.com/centering-in-the-unknown/

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 4

在CSS-tricks上的

This方法适用于所有浏览器和IE8 +，它是最接近表格之外具有良好浏览器支持的方法。

在这里演示：http://jsfiddle.net/YqKMH/show/

垂直居中高度未知的div

4 个答案: