在響應式視頻背景中定位文本

我需要在此視頻中放置一些文本。我擺脫了標題的容器，並且期望的結果仍然是機智的，所以這與我一起工作，但我一直在努力處理這個文本的中心！在響應式視頻背景中定位文本

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

來源

2016-07-31 Ryan G

這裏打印屏幕 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>

來源

2016-07-31 20:30:44 knizer

這對我也不起作用。 –

從您的瀏覽器打印屏幕 – knizer

工作複製/過去的所有代碼 – knizer

引導有一個內置的輔助類 - 的.text中心

試試這個：<div class="video-container text-center">

來源

2016-07-31 20:48:04

它不起作用，並將背景移動到右側。 –

使用此

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

而且還貼這一個：

.video-container { 
 

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

 
}

來源

2016-07-31 21:47:26

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

來源

2016-08-01 13:13:13

好吧，文本保持對齊，但圖像不再響應。 –

做一些媒體查詢響應@RyanG –

在響應式視頻背景中定位文本

回答

相關問題