3

私は新しい小さなプロジェクトのためにいくつかのテンプレートを書き込もうとしています-そして私はただ一つのことについて疑問に思いました：

ページのコンテンツ全体を中央の列の中に入れたい場合、たとえば幅が800ピクセルの場合、通常の方法は次のようになります（少なくとも、これは私がいつも行っていた方法です）。

<html>
    <head>
        <style>
            body {
                text-align: center; /* IE6 */
            }

            #wrapper {
                margin: 0px auto;
                width: 800px;
                background-color: #eee; /* to see it better */
                text-align: left; /* IE6 */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

さて、まったく同じことを行う別の方法がありますが、次のようにmargin: -50%;（またはこの場合は固定値margin: 400px;）を使用します。

<html>
    <head>
        <style>
            body {
                margin-left: 50%;
            }

            #wrapper {
                margin-left: -400px;
                width: 800px;
                background-color: #eee; /* to see it better */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

私の質問は、この2つの方法のいずれかが他の方法よりも優れているかどうかです。または不利な点？メインカラムを中央に配置するための一般的な「最良の解決策」はありますか？

4

3 に答える 3

7

margin:0 auto;要素の両側に同じ量のスペースがあることを確認します。

margin-left:50%;親を基準にしています。たとえば、コンテナの幅が1000ピクセルの場合、子要素の左マージンは500ピクセルになります。ただし、これは要素を中央に配置せず、左側を中央に配置します—例のように、子要素に固定値を使用してハックしない限り。

通常、あなたがあなたの場合のようにラッパーを扱っているとき、それはmargin:0 auto;最も単純で最も柔軟な解決策です。他の場合には、パーセンテージまたは固定値を使用する方が良い場合があります（たとえば、フローティングのものの場合）。

于 2012-06-05T08:07:48.337 に答える
2

この状況では、最初の方法のみを使用します。

メインdivのサイズを変更したい場合、または他のデバイスをサポートしたい場合は、必要な変更がはるかに少ないため、はるかに柔軟性があります。

2番目の方法はハックであり、最近のブラウザでは必要のないハックです。

于 2012-06-05T08:08:14.037 に答える
2

要素をプッシュするために本体に50％のマージンを与え、前の場所でそれを引っ張るためにラッパーに再び負のマージンを与えるので、この方法は機能します。しかし、ブラウザが正しくレンダリングしない場合があります。こちらの質問をご覧ください。

于 2012-06-05T08:11:44.393 に答える