我试图将绝对定位的标题垂直居中在具有灵活高度(最大宽度:100%;)的图像上,但遇到了麻烦。我知道我需要使用JS来检测div的高度并调整标题div的顶部定位,但我遇到了麻烦。
<div id="nav">navigation</div>
<div id="slider">
<img src="http://codeword.org/wp-content/uploads/2011/07/aspen_colorado.jpg">
<div class="caption">
<div class="wrap">
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
最佳答案
如果你知道标题的宽度和高度,你可以在 CSS 中完成它:
假设标题宽度为 400 像素,高度为 90 像素
#slider {
position:relative;
}
.caption {
position:absolute;
margin-left:-200px;
margin-top:-45px;
top:50%;
left:50%;
width:400px;
height:90px;
}
这会将其推至中心 50%。然后用负边距偏移一半宽度和一半高度。这将为您提供中心。
关于javascript - 在响应图像上垂直居中 div 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18159087/