Question

我们正在浏览器上编写视频播放器，我们需要在视频窗口上显示播放按钮。用户可以更改视频窗口大小。播放按钮应显示在视频窗口的中央。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Player</title>
        <style>
            #app {
                width: 100%;
                height: 100%;
                overflow: hidden;
                outline: none;
            }
        </style>
     </head>
     <body style="overflow: hidden; margin: 0px;">
         <link rel="stylesheet" href="test.css">
         <div id="app"></div>
         <video src="" id="videoID" width="100%"></video>
         <button type="button" id="playVideo">+</button>
     </body>
</html>

CSS：

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #2c3e50;
    margin-top: 10px;
}
#playVideo {
    position: absolute;
    left: 200px;
    top: 200px;
    display: none;
    border: none;
    border-radius: 50%;
}

我只是将playVideo的left和top作为200px，因为我无法将按钮置于中心位置。我尝试使用text-align，position并且它不起作用。我们可以通过使用视频元素的getBoundingClientRect（）并手动计算按钮的坐标来在javascript中执行此操作。任何人都可以告诉我，如果我们可以在不使用Javascript的情况下将按钮放在视频窗口中心。

Answer 1

试试（＃playVideo）：

position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);

This页面可能会对您有所帮助。

编辑：考虑创建一个包含两个元素的div：

<div id="container">
     <video src="" id="videoID" width="100%"></video>
     <button type="button" id="playVideo">+</button>
</div>


#container {
  position:relative;
}

#playVideo {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

如何使用CSS对齐视频窗口中心的按钮

1 个答案: