javascript - 在响应图像上垂直居中 div 标题

Question

我正在尝试将绝对定位的标题垂直居中在具有灵活高度（最大宽度：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>

Answer 1

如果你知道标题的宽度和高度，你可以在 CSS 中完成它：

假设标题是 400 像素宽和 90 像素高

#slider {
    position:relative;
}

.caption {
    position:absolute;
    margin-left:-200px;
    margin-top:-45px;
    top:50%;
    left:50%;
    width:400px;
    height:90px;
}

这会将其推至中心 50%。然后你用负边距偏移一半宽度和一半高度。这将为您提供中心。

Answer 2

您可以使用 jQuery 执行此操作：

img1）获取标签的高度。
2）将标题类的顶部设置为图像高度的一半。

var imgHeight = $('img').height();
$('.caption').css({'top': imgHeight/2});