Question

我正在尝试在视频顶部添加一个大播放按钮。

视频本身是响应式的，我希望播放按钮始终在视频中水平和垂直居中。

这将是

 ---------------------------
|                           |
|                           |
|   play button in center   |  <----video
|                           |
|                           |
 ---------------------------

我有类似的东西：

<div style='text-align:center;'>
         <div id='playIcon'><img src='play.png'/></div> 
          <video id='video' >
              <source src=/video.mp4' type="video/mp4">
          </video>
        </div>
</div>

我的css

#video{
   width:100%;
   max-height:1200px;
   z-index: 1;
   background-color: black;
}

如何在这种情况下将播放按钮居中？

Answer 1

由于您在父级上有文本对齐中心，这很好。所以它将水平居中。很难将它完全集中在每个屏幕尺寸的垂直中心，但您可以使用媒体查询来帮助实现不同尺寸的屏幕尺寸。

以下是一个例子。相应调整。

#playicon {
    display: inline-block;
    position: relative; 
    top: 40%;
}

Answer 2

以下是代码：

<div style='text-align:center;'>
         <div id='playIcon'><img src='play.png'/></div> 
          <video id='video' >
              <source src=/video.mp4' type="video/mp4">
          </video>
        </div>
        <button id="bu">Play</button>
</div>

这是css：

    #video{
   width:200px;
   max-height:150px;
   z-index: -1;
   background-color: black;
   position:absolute;
   top:0px;
   left:0px;
   }
   #bu{
   position:absolute;
   top:75px;
   left:100px;
   }

希望这有效！ PS：用播放按钮的图像替换按钮。

Answer 3

这是一个小提琴：

http://jsfiddle.net/Bc4NP/

您需要将position:relative添加到主div：

<div style="text-align:center; position:relative">
    <div id="playIcon"><img src="play.png" /></div> 
        <video id="video">
            <source src="/video.mp4" type="video/mp4">
        </video>
    </div>
</div>

然后，将此样式添加到播放按钮：

#video{
   width:100%;
   max-height:1200px;
   z-index: 1;
   background-color: black;
}
#playIcon {
    position: absolute; 
    top: 47%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

现在你得到一个精确的水平中心对齐，几乎完全垂直对齐（你可以更精确地改变top:47%）

Answer 4

添加

position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;

到包含图像的div（将其添加到你的css）：

#playIcon
{
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

这是一个纯CSS2解决方案，根据你的div的边界不需要不同的参数。

Demo

如何根据父div来居中元素？

4 个答案: