Question

我需要在此视频中居中显示一些文字。我摆脱了标题的容器，所需的结果仍然很明确，所以这对我很有用，但我很难处理这个文本的中心！

<div class="video-container">


    <video class="video" preload="true" autoplay = "autoplay" loop = "loop">
            <source src="nyc.mp4" type="video/mp4"/>

    </video>
    <p class="center-block quote"> Test </p>

样式：

.video-container {

position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;

}



video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}

Answer 1

这是一个打印屏幕 worked print screen

<!DOCTYPE html>
<html>
<body>
<style>
 .center-block{text-align: center;}
.video-container {

position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;

}



video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}
</style>
<div class="video-container">


    <video class="video" preload="true" autoplay = "autoplay" loop = "loop">
            <source src="nyc.mp4" type="video/mp4"/>

    </video>
    <p class="center-block quote"> Test </p>
</div>

</body>
</html>

Answer 2

Bootstrap有一个内置的助手类 - .text-center

试试这个：<div class="video-container text-center">

Answer 3

使用此

<p class="center-block quote" style="text-align:center;"> Test </p>

并粘贴这个：

＆＃13;

.video-container {

position:relative;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;

}

＆＃13;

Answer 4

＆＃13;

.video-container video{ 
  position: fixed;
  top: 100%;
  left: 100%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-100%, -100%);
}

.video-container{  
  justify-content: centre;
  width: 100%;
  height: 100%;
  text-align: centre;
}

＆＃13;

在响应的视频背景中居中文本

4 个答案: