Question

我正在尝试将视频对齐到图像的中心。

＆＃13;

.vbackground {
  background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
  background-repeat: no-repeat;
  width: 600px;
  height: 600px;
  position: relative;
}
#match {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vbackground'>
  <video controls id='match' width='300' height='300'>
    <source src='match.mp4' type="video/mp4" />
  </video>
</div>

＆＃13;

如何在视频中心（从各个方向）制作视频？它目前在图像的底部对齐。

Answer 1

尝试从position: absolute ID选择器中删除match规则，并将text-align课程的.vbackground属性设置为center。
这应该有效 -

.vbackground {
    background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    text-align: center;
 }    
 #match {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 2

只需添加margin-left:auto和margin-right: auto;到你的#match CSS STYLE，它会将视频与图像的中心对齐。

 
#match {

  margin-left: auto;
  margin-right: auto;

}

将视频嵌入图像的中心

2 个答案: