將視頻嵌入圖像中心

Question

我試圖將視頻對準圖像中心。

.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; 
 
}

<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>

我如何才能讓在圖像的中心（從四面八方）的視頻？它目前在圖像底部對齊。

Answer 1

只需加上margin-left:auto和margin-right: auto;到您的#match CSS樣式，它會將視頻對齊到圖像的中心。

 
#match { 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
}

Answer 2

嘗試刪除從match ID選擇position: absolute規則和對.vbackground類text-align屬性設置爲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; 
}