如何根据父div中心元素？

我想在视频上添加一个大的播放按钮。如何根据父div中心元素？

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

它将会像

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

如何中心的播放按钮，这种情况下？

来源

2014-02-12 Links

的可能重复的[中心DIV水平和垂直方向（http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically） – apaul

这里是一个小提琴：

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%）

来源

2014-02-12 02:08:00

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

一个例子如下。相应地调整。

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

来源

2014-02-12 01:49:13 CRABOLO

下面是代码：

<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：将按钮替换为播放按钮的图像。

来源

2014-02-12 01:57:07 ENM185

添加

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

包含图像（它添加到你的CSS）的股利：

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

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

Demo

来源

2014-02-12 02:15:46 Cilan

如何根据父div中心元素？

回答

相关问题