[英]How To Vertically Center Text Over Responsive Video
For some reason this is giving me heck and can't find a solid answer. 由于某种原因,这给了我麻烦,找不到可靠的答案。
I have a video playing in the background that goes to full-width and is responsive to the screen size. 我在后台播放一个视频,该视频将变为全角,并响应屏幕尺寸。 I have a title/text over the video. 我在视频上有标题/文字。 But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! 但是我一生都无法想出如何以响应方式将文本垂直居中放置在视频中! Thanks for any help! 谢谢你的帮助!
http://codepen.io/149203/pen/VagPxe http://codepen.io/149203/pen/VagPxe
<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>
.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;
}
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
Display wrapper to display: table
, change child element to display: table-cell
, vertiacl-align: middle.
显示包装以display: table
,将子元素更改为display: table-cell
, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP http://codepen.io/anon/pen/ZWwLPP
I found and forked this CodePen. 我找到并分叉了此CodePen。 This is the best solution I found. 这是我发现的最佳解决方案。 (Uses Bootstrap.) (使用引导程序。)
http://codepen.io/149203/pen/JXxbEL http://codepen.io/149203/pen/JXxbEL
HTML 的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 的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;
}
simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
使用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.