我试图将一个绝对定位的标题垂直居中在一个高度灵活(最大宽度:100%;)但遇到问题的图像上。我知道我需要使用JS来检测div的高度并调整标题div的顶部位置,但我遇到了麻烦。
http://jsfiddle.net/A69Xr/
<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%。然后用负边距偏移一半宽度和一半高度。这将成为你的中心。
您可以使用jQuery:来完成此操作
1) 获取img
标签的高度
2) 将标题类的顶部设置为图像高度的一半。
var imgHeight = $('img').height();
$('.caption').css({'top': imgHeight/2});