вертикальный выровнять с тегом видео

Я пытаюсь вертикально выровнять a <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), но это ничего не делать с топ: 50 %, поэтому видео отключено от экрана.

Любые идеи, что я могу делать неправильно?

Примечание: также я попробовал предложение в комментарии о display:table-cell, который также не работал.

источник

2014-09-23 Kevin

одно уточнение, что если я 'верх: 350px' я получаю примерно правильный эффект, так что по какой-то причине' верх: 50% 'не делает что он должен. Я думаю, проблема в том, что указанный процент имеет родительский элемент (в данном случае - «тело»), но мне нужно, чтобы это было 50% от 'window.innerHeight', что может быть невозможно. – Kevin

try 'position: absolute;' вместо 'position: relative;' to video. – Anonymous

На самом деле то, что сработало, добавляло одну строку JS, чтобы установить body.height = window.innerHeight. Тогда верхний ведет себя так, как должен. Я уверен, что решение, которое я разместил, предполагало, что ваш контент находится в контейнере с фиксированным размером (некоторый внешний div с шириной и высотой). – Kevin

Итак, я понял, что тело должно иметь высоту. Сначала я сделал это через 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

вертикальный выровнять с тегом видео

ответ

Смежные вопросы