0

迷路を作成し、smily div ("highlight_lose") を迷路 ("main") の中央に配置したい

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    bottom: 375px;


}

ここにフィドルリンクがあります： http://jsfiddle.net/uqcLn/30/

4

2 に答える 2

1

新しい答え

あなたが私にくれたものに基づいて、これは古い忠実な位置の絶対メソッドを使用した必須の CSS コードです。

#highlight_lose {
    height: 300px;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
div.sad_smileyface {
    width: 300px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    ...
    [your graphic styling code here]
}

注意すべき点の 1 つは、含まれている div の幅を 100% に設定し、垂直方向の中央に配置したことです。次に、子スマイリーフェイス div を水平方向に中央揃えにしました。これは必須ではありません。私が行った方法です。高さが変わる場合は を調整し#highlight_lose、幅が変わる場合は更新しますsad_smileyface

元の回答

高さが少なくともデカールされている場合 (これはあなたのものです)、親コンテナーを (念のため) に設定すると、子 div でposition: relative使用できるはずです。margin: auto;これは、クロスブラウザーから IE 6 まで動作するはずです。

他のオプションには、マージンを高さと幅の負の半分に設定することで、あなたの方法を実行することが含まれます。margin: -275px -275px;.

また、CSS3 の Flexbox モデルもこれを修正しますが、接頭辞が多く、どこでもサポートされているわけではありません。

于 2013-10-07T20:50:50.997 に答える
-1

http://jsfiddle.net/uqcLn/34/

これが新しい更新バージョンです。古いブラウザーの変換の代わりにマージンを設定することもできます

于 2013-10-07T21:18:35.917 に答える