0

柔軟な高さ (最大幅: 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>
4

2 に答える 2

2

キャプションの幅と高さがわかっている場合は、CSS で実現できます。

キャプションが幅 400 ピクセル、高さ 90 ピクセルであるとします。

#slider {
    position:relative;
}

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

これにより、中心に 50% 押し込まれます。次に、幅の半分と高さの半分を負のマージンでオフセットします。そして、それはあなたのためにそれを中心にします。

于 2013-08-10T06:00:05.643 に答える
2

jQuery を使用してこれを行うことができます。

1)imgタグの高さを取得します。
2) キャプション クラスの上部を画像の高さの半分に設定します。

var imgHeight = $('img').height();
$('.caption').css({'top': imgHeight/2});
于 2013-08-10T06:08:02.057 に答える