视频中心 html5,以html5中的视频为中心的文本

好吧，z-index: -1将在Firefox搞砸。使用这个：

// all the video stuff goes in here.

#video-container {

text-align: center;

height: 400px;//or whatever you want

line-height:400px;//should be equal to the height

position: ..

z-index: 1;

}

#custom-message {

position: relative;

display: inline-block;

height:..;

width:..;

z-index: 10;

}

尽管如此，最好的方法是使用JavaScript。无论如何，您都需要使用z-index，因此相对定位视频容器(绝对自定义消息)，但在视频容器内部，然后使用JavaScript来计算自定义消息的left和top。波纹管是原始的JavaScript(无库)方式。

window.onload = funciton() {

var video = document.getElementById('video-container');

var customMessage = document.getElementById('custom-message');

var customMessageTop = video.offsetHeight/2 - customMessage.offsetHeight/2;

var customMessageLeft = video.offsetWidth/2 - customMessage.offsetWidth/2;

customMessage.style.left = customMessageLeft + 'px';

customMessage.style.top = customMessageTop + 'px';

};

或者如果你已经在使用jQuery作为你的东西了。

$(function() {

$('#customMessage').css({

top: $('#video').height()/2 - $('#customMessage').height()/2,

left: $('#video').width()/2 - $('#customMessage').width()/2

});

});