與視頻標籤垂直對齊

我正在嘗試垂直對齊<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％（從平移Y），但它並不與上面做任何事：50 ％，所以視頻在屏幕外一半。

任何想法，我可能做錯了什麼？

注意：我也在關於display:table-cell的評論中嘗試了這個建議，這也沒有奏效。

來源

2014-09-23 Kevin

澄清一點的是，如果我做的'頂：350px'我得到大致正確的效果，所以出於某種原因，'頂部：50％'是不是做它應該是什麼。我認爲問題在於指定的百分比是父元素（在這種情況下是'body'），但我需要它是'window.innerHeight'的50％，這可能是不可能的。 – Kevin 2014-09-23 06:24:20

嘗試'position：absolute;'而不是'position：relative;'來視頻。 – Anonymous 2014-09-23 06:25:50

實際上是什麼工作，是增加了單行的JS，來設置body.height = window.innerHeight。然後，最高行爲應該是這樣。我非常肯定，我發佈的解決方案是假設你的內容是在一個固定大小的容器（一些寬度和高度的外部div）。 – Kevin 2014-09-23 06:40:41

所以我想通了，身體需要有身高。起初，我是通過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; 
}

來源

2014-09-23 14:17:49 Kevin

與視頻標籤垂直對齊

回答

相關問題