0

親divの高さを知らなくても、子divを親div内で垂直方向に中央揃えする方法を誰かが知っているのではないかと思っていましたか?

ピンタレスト スタイルのギャラリー ページ (画像) があり、ホバーすると、画像に関する情報を含む画像の上に div が表示されます。各画像の高さが異なる可能性があるため、子コンテンツを親 div の中央に配置する方法がわかりません。

jQuery Masonary プラグインを使用してレイアウトを作成しています。

現在、画像を含む外側の div があります。白（またはその他）の背景色が 0,0 に配置され、幅と高さが 100% の内側の div。これはすべてうまく機能し、 text-align: center; を使用するだけで水平方向に中央揃えすることができました。

どうもありがとう！

4

2 に答える 2

0

これは、両方の方法で中央に設定するために機能するはずです。まだテストしていません:

var ParentW = $("parent-id").width();
var ParentH = $("parent-id").height();
var ChildW = $("child-id").width();
var ChildH = $("child-id").height();
var PosW = (ParentW - ChildW)/2;
var PosH = (ParentH - ChildH)/3;
$("child-id").css({"top":PosH, "left": PosW });
于 2013-02-01T01:14:47.447 に答える
0

CSS ソリューションが必要な場合は、これでうまくいくと思います。

たとえば、次のようなレイアウトがあるとします。

<div class="container">
    <div class="parent">
        <div class="child">
            Lorem ipsum....
        </div>
   </div>
</div>

この CSS を使用すると、コンテナー.child内で水平方向と垂直方向の両方でブロックを中央に配置できるはずです。.parent

.parent {
    /* change values to adjust the top and bottom space used to vertically center */
    padding-top: 33%;
    padding-bottom: 33%;
}

.child {
    width: 50%; /* the width is not mandatory, of course */
    margin: auto;
    overflow: hidden;
}

ここでテストできます。これが何かの助けになることを願っています。

于 2013-02-01T01:54:24.170 に答える