Question

我的容器div包含一个视频，div包含一些文字。

我希望文本位于视频上方和中心位置，同时调整浏览器窗口大小。

我意识到这个demo，但我认为这只是一个起点......我怎样才能改进我的代码？

这是代码。

/**CSS**/

video {
  position:relative;
  z-index:-1;
}

#custom-message {
  position:relative;
  color: rgb(230, 200, 98);
  z-index:1;
  top: -200px;       
}

<!--**HTML**-->

<div id="container" align="center">
  <video width="640" height="320" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
  </video>
  <div id="custom-message">CENTERED TEXT ABOVE</div>
</div>

Answer 1

好的，z-index: -1会搞砸Firefox。使用此：

<div id="video-container">
// all the video stuff goes in here.
<a id="your-text"></a>
</div>

#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和{{1}自定义消息。下面是原始的JavaScript（无库）方式。

top

或者如果您已经在使用jQuery。

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';
};

Answer 2

在此处查看代码段： DEMO

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});

Answer 3

的CSS：

video {
    position:relative;
    z-index:-1;
}

#custom-message {
    position:relative;
    color: rgb(230, 200, 98);
    z-index:1;
    top: 0;
    text-align: center;    
}

HTML：

<div id="container" align="center">
     <div id="custom-message">CENTERED TEXT ABOVE</div>

    <video width="640" height="320" autoplay>
      <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
    </video>
</div>

文本以html5中的视频为中心

3 个答案: