javascript - 将两个 div 居中，一个带有 Logo ，一个带有文本，并排放置在 html5 视频的顶部并且仍然可以响应？

Question

我目前正在尝试为我的大学元素建立一个网站，以宣传我的游戏 YouTube channel 。在主页上，我设置了一个简短的循环 html5 视频作为背景。然后我想在上面放一个标志和一个标题和一些文本。然后我还使用分隔图像来分隔页面的各个部分。

我已经为 z-index 设置了正确的分层，并且我有一段 jQuery 代码可以调整视频的大小，工作正常。我的问题是，我终其一生都无法弄清楚如何将视频中间的图像和文本居中放置在屏幕上，并让它保持那样并根据窗口大小调整大小。我希望这个网站也能在移动设备上工作，因此响应迅速。我还希望始终在视频底部显示拆分图像。

我想我大部分时间都在努力完成我想要完成的事情，但我就是不能完全正确。

这是网站的链接:http://www.willcaddy.com/

如果更简单的话，这里有一个指向 pastebin 代码的链接:http://pastebin.com/vnH7LRNm

如果有人能帮助我，我将不胜感激!

Answer 1

只是在 chrome 中使用 inspect 元素，通过这样做，我能够让你的图像和文本都在视频上居中

.videoContainer {
 /* display: inline-block; */
    height: 54vw;
    width: /*whatever you want*/
    margin-left: auto;
    margin-right: auto;
  }

删除内联 block ，然后使用您想要的任何宽度值，我尝试使用 400px 并且对我来说它很好地居中。您可能需要使用一两个媒体查询来处理较小屏幕尺寸上的放置