文本居中覆盖在 HTML 中 Joomla 模块中的视频上答案

【问题标题】：Text centered overlayed on video in Joomla module in HTML文本居中覆盖在 HTML 中 Joomla 模块中的视频上
【发布时间】：2015-02-26 18:23:14
【问题描述】：

好的。我已经为此苦苦挣扎了一天。有人可以帮忙吗？

我正在尝试在 Joomla CMS 模块中自动播放 .mp4 视频作为背景，文本覆盖在模块中心的顶部。

我认为简单的 html 会比尝试找到一个插件来完成它更好。

基本上我希望视频在模块的中心（水平和垂直）自动播放。这相当容易，因为视频是模块的精确宽度，高度会自动调整。该模块是响应式的，所以那里没有问题。此代码有效：

<video width="1600" autoplay loop>
<source src="/newimages/capsulas-compatibles.mp4" type="video/mp4">
</video>

我最苦恼的是将 H1 标题放在视频顶部的中心（水平和垂直）。所以我尝试了以下html，但文本只是出现在视频之前，而不是覆盖在视频的中心：

<div style="z-index:10; position:relative; top:0; text-align:center; vertical-align: middle; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

是我的代码有问题还是在 Joomla 模块中？非常感谢任何帮助。

【问题讨论】：

您必须将 h1 div 位置设置为绝对位置并将左侧和顶部设置为 50%
就是这样！感谢您花时间回答。你真的很开心（我的！）
欢迎您。我将其发布为答案。它可能对其他人有所帮助。

标签： css html video joomla

【解决方案1】：

尝试按照它来解决您的问题：

<div style="z-index:10; position:relative; top:50%; left:50%; text-align:center; vertical-align: middle; position:absolute; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

使 H1 DIV position:absolute; 并给出 left:50%; 和 top:50%;。

【讨论】：