将文本居中于HTML视频

时间：2017-11-29 09:09:43

标签： html css

我在网站上添加了一个小视频背景，并在顶部添加了一些文字。但是，我无法将文本置于视频中间。有人可以帮忙吗？请参阅下面的代码。

.header-unit {
  height: 80px;
  border: 2px solid #000;
  border-right: none;
  border-left: none;
  margin-top: 50px;
  position: relative;
  padding: 20px;
}

#video-container {
  position: absolute;
}

#video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#video-container p {
  position: absolute;
  z-index: 1;
  font-size: 50px;
  color: white;
}

video {
  position: relative;
  z-index: 0;
}

video.fillWidth {
  width: 100%;
}
<div class="header-unit">
  <div id="video-container">
    <p>Next Event: December 10th</p>
    <video autoplay loop class="fillWidth">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
    </video>
  </div>
</div>

4 个答案:

答案 0 :(得分：0)

您只需在此规则中添加2行：

     #video-container p {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: white;

     width:100%;
     text-align:center

     }

如果您给绝对定位的段落提供100％的宽度，则可以轻松地使用text-align: center 

.header-unit {
           height: 80px;
           border: 2px solid #000;
           border-right: none;
           border-left: none;
	       margin-top: 50px;
           position: relative;
           padding: 20px;
         }

         #video-container {
           position: absolute;
         }

         #video-container {
           top:0%;
           left:0%;
           height:100%;
           width:100%;
           overflow: hidden;
         }

         #video-container p {
	       position: absolute;
	       z-index: 1;
	       font-size: 50px;
	       color: white;
         width:100%;
         text-align:center
         }

         video {
           position: relative;
           z-index: 0;
         }
         video.fillWidth {
          width: 100%;
         }
<div class="header-unit">
            <div id="video-container">
		        <p>Next Event: December 10th</p>
                <video autoplay loop class="fillWidth">
                  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
                </video>
            </div>
        </div>

答案 1 :(得分：0)

方法＃1

  1. 使用left和包含元素的偏移位置 right属性值0
  2. 使用text-align: center
    3. 居中处理文字
  3. 以transform: translateY(50%)
    4. 垂直居中

    示例： 

    video-container p {
      position: absolute;
      z-index: 1;
      font-size: 50px;
      color: black; /* for the sake of demonstration */
      /* additional */
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      transform: translateY(50%);
    }

    代码段示范：

    ＆＃13;
    ＆＃13; 
    .header-unit {
  height: 80px;
  border: 2px solid #000;
  border-right: none;
  border-left: none;
  margin-top: 50px;
  position: relative;
  padding: 20px;
}

#video-container {
  position: absolute;
}

#video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#video-container p {
  position: absolute;
  z-index: 1;
  font-size: 50px;
  color: black; /* for the sake of demonstration */
  /* additional */
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  transform: translateY(50%);
}

video {
  position: relative;
  z-index: 0;
}

video.fillWidth {
  width: 100%;
}
    ＆＃13; 
    <div class="header-unit">
  <div id="video-container">
    <p>Next Event: December 10th</p>
    <video autoplay loop class="fillWidth">
       <source src="https://coverr.co/s3/mp4/Into_the_Wild.mp4"/>
    </video>
  </div>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    方法＃2

    1. 使用left和包含元素的偏移位置 right属性值0
    2. 使用text-align: center
      3. 居中处理文字
    3. 使用p的{​​{1}}和top属性值将嵌套的right元素的高度定义为垂直居中

      4. 示例： 

      0

      代码段示范：

      ＆＃13;
      ＆＃13; 
      #video-container p {
  position: absolute;
  z-index: 1;
  font-size: 50px;
  color: black; /* for the sake of demonstration */
  /* additional */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  height: 58px;
}
      ＆＃13; 
      .header-unit {
  height: 80px;
  border: 2px solid #000;
  border-right: none;
  border-left: none;
  margin-top: 50px;
  position: relative;
  padding: 20px;
}

#video-container {
  position: absolute;
}

#video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#video-container p {
  position: absolute;
  z-index: 1;
  font-size: 50px;
  color: black; /* for the sake of demonstration */
  /* additional */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  height: 58px;
}

video {
  position: relative;
  z-index: 0;
}

video.fillWidth {
  width: 100%;
}
      ＆＃13;
      ＆＃13;
      ＆＃13;

      方法＃3

      1. 在包含父元素
        2. 上声明<div class="header-unit"> <div id="video-container"> <p>Next Event: December 10th</p> <video autoplay loop class="fillWidth"> <source src="https://coverr.co/s3/mp4/Into_the_Wild.mp4"/> </video> </div> </div>
      2. 根据需要将更多display: flex样式声明为包含元素（有关详细信息，请参阅示例）
      3. 重置嵌套flex-box的{​​{1}}属性值以进行垂直居中

        4. 示例： 

        margin

        代码段示范：

        ＆＃13;
        ＆＃13; 
        p
        ＆＃13; 
        video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* additional */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
        ＆＃13;
        ＆＃13;
        ＆＃13;

答案 2 :(得分：0)

这应该有助于你正在寻找什么。为了方便，我添加了背景和边框;您可以在使用中删除它们。

.header-unit {
       height: 200px;
       border: 2px solid #000;
       margin-top: 50px;
       position: relative;
       padding: 20px;
       background: #CCC;
     }
     
     #video-container {
       height:100%;
       width:100%;
       overflow: hidden;
       position: relative;
       border: 1px solid blue;
     }

     #video-container p {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: white;
       margin: 0;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       border: 1px solid red;
       width: 85%;
       text-align: center;
     }

     video {
       position: absolute;
       z-index: 0;
       border: 1px solid green;
     }
     video.fillWidth {
      width: 100%;
     }
    <div class="header-unit">
        <div id="video-container">
            <p>Next Event: December 10th</p>
            <video autoplay loop class="fillWidth">
              <source src="Forest.mov" type="video/mp4"/>
            </video>
        </div>
    </div>

答案 3 :(得分：0)

只需使用以下代码替换#video-container和#video-container p样式：

#video-container {
       top:0%;
       left:0%;
       height:100%;
       width:100%;
       overflow: hidden;
       text-align: center;
}

#video-container p {
       width:auto;
       margin: auto;
       z-index: 1;
       font-size: 50px;
       color: white;
       line-height: 80px;
}

编辑：试试这个：

#video-container p {
       position: absolute;  //set this to be able to place it anywhere
       top: 5%;  //calculate this value based on your video block's height
       left: 5%; //calculate this value based on your video block's width
       z-index: 1;
       font-size: 50px;
       color: white;
}
相关问题
最新问题