0

ユーザーが Web ページのサイズを変更するかどうかにかかわらず、常に div をページの中央に配置する必要があります。

私は使用してみました: margin: auto; マージン: 0 自動; マージン左: 自動; margin-right auto;

しかし、これら3つのいずれも機能しませんでした。

HTML:

<div id="grayinnerbackground">
</div>

CSS:

div#grayinnerbackground {
            margin: auto;
            width:1000px;
            background-color: #D9D9D9;
            height: 100%;
            position: fixed;
            z-index: -1;
}

これは、私が話していることの例のフィドルです。 http://jsfiddle.net/ymvDJ/

ありがとう。

4

6 に答える 6

1

ポジションを固定したい場合は、これらのルールを追加して、通常のマージン トリックを削除します。

left: 50%;
margin-left: -25px; // half the width of your element

こちらをご覧ください：http://jsfiddle.net/8DfnG/2/

于 2013-08-18T01:00:40.630 に答える
0

を削除position: fixedし、 を に変更しwidthて、前に50pxがあることを確認します。0automargin: auto

アップデート：

div をウィンドウと同じ高さにするには、bodyとも次のように設定htmlしてください。height: 100%;

body, html {
  height: 100%:
}

jsfiddleを再度更新しました

于 2013-08-18T00:56:58.440 に答える
0

このこの HTML:

<div id="grayinnerbackground">
    foo
</div>

CSS:

div#grayinnerbackground {
            margin: auto;
            width: 50px;
            background-color: #ccc;
            height: 100%;
}

テキストを div に入れ、今何かをチェックするまで、なぜうまくいかなかったのか完全にはわかりません。

アップデート

はぁ、疲れた。div が空で、高さが 100% の場合、親の高さ (<body>この場合は ) の 100% になります。他にコンテンツがないため<body>、 の高さは 0 です<div>。絶対的な高さを指定すると、次のように表示されます。

div#grayinnerbackground {
            margin: auto;
            width: 50px;
            background-color: #ccc;
            height: 10px;
}
于 2013-08-18T00:59:10.310 に答える
0

使用できます

position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */

デモ: http://jsfiddle.net/ymvDJ/3/

于 2013-08-18T01:00:39.570 に答える
0

使用する：

position: relative

それでもうまくいかない場合は、これも追加する必要があるかもしれません:

display: block;

「位置: 固定」とは、x 座標と y 座標に何があっても固定されることを意味します。

于 2013-08-18T01:02:36.423 に答える
0

これを試すことができます

div#grayinnerbackground {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 50px;
    background-color: #D9D9D9;
    height: 100%;
}

http://jsfiddle.net/g49Mb/

ここでの作業の詳細: http://codepen.io/shshaw/full/gEiDt

于 2013-08-18T01:03:54.087 に答える