0

最大幅 100%、高さ auto (レスポンシブ レイアウト用) の画像上にある絶対位置の div 内にテキスト ブロックを垂直方向に配置しようとしています。テキストのブロックを垂直方向に揃えて、スケーリング中に垂直方向の配置を維持するにはどうすればよいですか? ある種のJavaScriptを使用する必要があると思いますが、よくわかりません。どんな助けでも大歓迎です。

http://jsfiddle.net/8Jjs8/

<div id="container">
    <div class="slider">
        <ul class="slides">
            <li class="slide">
                <img src="http://awsassets.panda.org/img/scr_239815_362780.jpg" class="image">
                    <div class="caption">
                        <div class="caption-inside">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
             </li>
        </ul>
    </div>
</div>

#container {
    max-width: 600px;
    max-height: 400px;
    margin: 0 auto;
    position: relative;
}

.slider {
    position: relaitve:
    width: 100%;
}

ul.slides {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.slide {
    position: relative;
    display: block;
}

.image {
    max-width: 100%;
    height: auto;
}

div.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

div.caption-inside {
    background: rgba(255,255,255,.5);
}
4

1 に答える 1

0

これは途中であなたを得るでしょう、しかし高さは問題として遊びます。

div.caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30%;
    margin: auto;
}

これらすべてをはるかに簡単にする新しいCSS機能がいくつかあることは知っていますが、今のところ、制限を守るか、jsに目を向ける必要があるかもしれません。

于 2013-01-22T23:36:37.917 に答える