Question

我正在尝试垂直对齐<video>标记。我找到了以下文章，看起来很有希望，但没有运气：

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

为了保持宽高比，我有这样的CSS：

video {
    min-width:100%;
    width:100%;
    height:auto;
    background-color:black;
    background-size:cover;
}

因此，效果是使视频在浏览器中水平放置，并垂直尽可能高，以适应宽高比。这会在浏览器窗口的底部留下一些黑色空间，所以为了看起来不错，我想让视频元素居中，在上方和下方留下相同的黑色空间。

该链接的建议是：

video {
    top:50%;
    position:relative;
    transform: translateY(-50%); /* and all the browser variants of this */
}

在几个浏览器中，结果是将视频向上移动50％（来自translateY），但它不会对top：50％执行任何操作，因此视频会在屏幕外移动一半。

任何想法我可能做错了什么？

注意：我也在display:table-cell的评论中尝试了这个建议，这个建议也没有用。

Answer 1

所以我想通了，身体需要有高度。起初我是通过jQuery做到的，例如类似的东西：

$(document).ready(function() {
    // actually more complicated than this, because window.innerHeight isn't
    // available on all browsers...
    $('body').height(window.innerHeight);
});

然后一位同事指出我现在也必须处理调整大小。他建议使用另一种只有CSS的解决方案：

html,body {
    min-height:100%;
    height:100%;
    margin:0;
}

垂直对齐视频标签

1 个答案: