5

「div」属性をページの中央 (水平方向) に揃えようとしています。問題は、私が使用した属性が何であれ、「div」が引き続き左に配置されることです。私が参照している 'div' は、'html' および 'body' 属性内にある Web ページのページ 'div' です。CSSコードは次のとおりです。

#page{
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right:auto;

    border-color: black;
    border-style: solid;
    border-width: thin;

    overflow:auto;

    padding-bottom: 10px;
    padding-top: 0px;

    width:1200px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    color:black;
    font-size:12px;    
    height:700px;
}

「html」、「body」CSS コードは次のとおりです。

html,body {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

「オーバーフロー」プロパティを削除すると、div はページの中央に配置されますが (ただし、その上にあるメニューをオーバーレイします)、幅が/この div 内に表示されるページの高さが、CSS で指定されたものよりも大きい。

4

6 に答える 6

2

margin:auto を機能させるには、HTML と BODY であるメイン コンテナーの幅/高さを定義する必要があります。

重要: HTML 要素と BODY 要素の両方を幅/高さのプロパティで指定する必要があります

次のようにします

html,body {
    background-color:#FFFFFF;
   width:100%;
    height:100%;
}

このフィドルを見て

于 2013-05-18T12:55:39.107 に答える
2

しばらくコーディングしていませんが、通常、中央揃えのページを作成するときは次のようにします。

html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }

次にdivの場合：

#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }

私が言ったように、それはうまくいくかもしれませんし、うまくいかないかもしれません。

于 2013-05-18T13:00:18.750 に答える
1 
<div style="margin:0px auto;">sfsfsafafas</div>

このコードを使用すると、div が中央に表示されます。

于 2013-06-08T06:41:11.180 に答える
1

あなたのdivが全画面幅を埋めているようです。したがって、中央揃えはdiv に目に見える影響を与えません。代わりにスパンを使用してみてください。

以下は機能しません

<body style="text-align:center">
  <div>Foo</div>
</body>

以下はうまくいくはずです

<div style="text-align:center">
  <span>Foo</span>
</body>

于 2013-05-18T12:52:24.133 に答える
0

水平方向に中央揃えしようとしている場合は、中央揃えの「左」および「右」属性も確認できます。

たとえば、幅がページの 60% (幅:60%) の場合、(左:20%) と (右:20%) のどちらを中央に配置するかを設定できますが、それは div の配置方法によって異なります。(位置:絶対) または (位置:相対)。

(position:absolute) 上記の幅で、左右を水平方向に中央揃えにする必要があります。

<center> enter code </center>過去に私のために働いた HTML 内にもあります。

私はこれについての達人ではないので、あなたの場合にどの「ベストプラクティス」を使用するべきかわかりません.

于 2013-05-18T12:58:55.543 に答える
0

単純：

HTML

<div id="page"></div>

CSS

#page {
  width: 350px; height: 400px; border: 1px solid #000; margin: auto
}

jsFiddle の例

于 2013-05-18T12:52:25.900 に答える