如何在响应图片上垂直居中文本? [英] How can I vertically center text over a responsive image?
本文介绍了如何在响应图片上垂直居中文本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当浏览器窗口调整大小时,如何获取这些图片上的字幕文字?我的实现是jicky,我需要一个方法,以防止文本在窗口大小调整时滑动。
< div class =row>
< div class =col-md-6>
< img src =http://placekitten.com/600/375class =img-responsive/>
< h2 class =homeImageLink>
< span>标题文字< / span>
< / h2>
< / div>
< div class =col-md-6>
< img src =http://placekitten.com/600/375class =img-responsive/>
< h2 class =homeImageLink>
< span>标题文字< / 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-event:none;
}
解决方案
容器,使其位置相对。
.img-container {
position:relative;
}
然后让homeImageLink绝对值并在45% p>
它将使它垂直居中。
.homeImageLink {
position:absolute;
top:calc(50% - 24px); // 24px是H1的字体大小我假设
left:0;
text-align:center;
width:100%;
}
此处演示: http://codepen.io/anon/pen/bJadE
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;
}
解决方案
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%..
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
这篇关于如何在响应图片上垂直居中文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文