twitter-bootstrap 如何在响应式图像上垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23773647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I vertically center text over a responsive image?
提问by drewwyatt
How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized.
当浏览器窗口调整大小时，如何让这些图像上的标题文本移动？我的实现很棘手，我需要一种方法来防止在调整窗口大小时文本四处滑动。
<div class="row">
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
</div>
.homeImageLink {
position: absolute;
top: 110px;
left: 0;
text-align: center;
width: 100%;
}
.homeImageLink span {
color: red;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
letter-spacing: 15px;
pointer-events: none;
}
回答by Rahul Patil
Just add one class to parent container, make it's position relative.
只需向父容器添加一个类，使其位置相对。
.img-container {
position:relative;
}
And then make homeImageLink absolute and give top at around 45%..
然后将 homeImageLink 设为绝对值并在 45% 左右给出最高值。
It will make it vertically centered..
它将使其垂直居中..
.homeImageLink {
position: absolute;
top: calc(50% - 24px); //24px is font size of H1 I assume
left: 0;
text-align: center;
width: 100%;
}
Demo here : http://codepen.io/anon/pen/bJadE
演示在这里：http: //codepen.io/anon/pen/bJadE
回答by Niente0
I came up with another solution, here's a working demo:
我想出了另一个解决方案，这是一个有效的演示：
http://codepen.io/niente0/pen/jyzdRp
http://codepen.io/niente0/pen/jyzdRp
HTML:
HTML：
<DIV class=wrapper>
<DIV class=divimage></DIV>
<DIV class=divtext>THIS IS A TEST</DIV>
</DIV>
CSS:
CSS：
HTML,BODY {
max-width:1200px;
}
.wrapper {
position:relative;
width:100%;
max-width:1200px;
height:100%;
min-height:320px
}
.divimage { position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}
.divtext {
position:absolute;
top:0;
left:0;
width:100%;
padding-top:13.5%;
text-align:center;
font-weight:bold;
font-size:5vw;
color:white;
font-family:arial;
}
@media (min-width: 1200px) {
.divtext{
font-size:60px;
}
}
