如何在響應視頻上垂直居中放置文本
[英]How To Vertically Center Text Over Responsive Video
問題描述
由於某種原因，這給了我麻煩，找不到可靠的答案。
我在后台播放一個視頻，該視頻將變為全角，並響應屏幕尺寸。 我在視頻上有標題/文字。 但是我一生都無法想出如何以響應方式將文本垂直居中放置在視頻中！ 謝謝你的幫助！
Codepen：
http://codepen.io/149203/pen/VagPxe
的HTML：
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
CSS：
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
拉入此CSS：
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
3 個解決方案
解決方案1
3 2016-05-07 22:34:13
顯示包裝以display: table ，將子元素更改為display: table-cell ， vertiacl-align: middle. http://codepen.io/anon/pen/ZWwLPP
解決方案2
2 已采納 2016-05-14 02:50:22
我找到並分叉了此CodePen。 這是我發現的最佳解決方案。 （使用引導程序。）
http://codepen.io/149203/pen/JXxbEL
的HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
的CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}
解決方案3
0 2016-05-07 22:39:22
使用vertical-align:middle表頭容器模擬為表，將h3，h6模擬為表單元
.header-container { width: 100%; height: 100vh; position: relative; padding: 1px; display:table; } .video-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } video { position: absolute; z-index: -100; width: 100%; } h3, h6 { display:table-cell; vertical-align:middle; text-align: center; color: white; }
<body> <div class="header-container"> <div class="video-container"> <video preload="true" autoplay="autoplay" loop="loop" volume="0"> <source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4"> </video> </div> <!-- video-container --> <h3>Centered Title</h3> <h6>This should be vertically and horizontally centered</h6> </div> <!-- header-container --> </body>
如何使響應的裁剪圖像垂直居中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.