7

GoogleChromeのページでdivを水平方向に中央揃えにする方法を探しています。

私はmargin：autoを使ってみました。しかし、この機能はGoogleChromeではサポートされていないことを読みました。その結果、私のdivは画面の左側に揃えられたままになります。

たとえば、margin-left：100px;を使用する場合。divはページの中央に向かって移動しますが、手動で中央に配置したくありません。

HTML：

<body>
    <div id="header">
        <p>John Doe</p>
        <p>email</p>
    </div>   
</body>

CSS：

body 
{
    background-color: #f0f0f0;
}

div 
{
    border-radius: 5px;    
}

#header 
{
    position: fixed;
    background-color: #3399ff;
    color: white;
    width: 60%;
    margin: auto;
}

#header p 
{
    display: inline;
}
4

4 に答える 4

14

margin: auto固定（または絶対）位置divでは機能しません。left: 50%代わりに、要素幅の負の半分に左マージンを設定する必要があります。

#header 
{
    position: fixed;
    width: 60%;
    left: 50%;
    margin-left: -30%;
}

http://jsfiddle.net/ZAqJM/

更新：現在、ほとんどのブラウザがサポートtransfrom: translateしているので、快適に行うことができます：

{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
于 2013-03-26T00:51:09.810 に答える
2

<div>使用を中心に置くことは、margin: auto;ブラウザ間で機能します。中央に配置しようとしているdivがブロックレベルの要素に含まれていることを確認する必要があります。

<div class="headerContainer">
    <div id="header">
        <p>John Doe</p>
        <p>email</p>
    </div>
</div>

適切に中央に配置するdiv#headerには、ブロックレベルである必要があり、ブロックレベルwidth要素の子要素であるとが必要です。（技術的にはブロックレベルですが、ヘッダーの「コンテナ」を維持することをお勧めします）<body>

position: fixedしたがって、からを削除し#header { ... }ます。実例をご覧ください：http：//jsfiddle.net/amyamy86/2sXdC/

于 2013-03-26T00:46:25.447 に答える
2

私はこれがかなり古いことを知っていますが、以下は魔法のように機能することを言及する価値があると思います：

#header {
  left: 50%;
  transform: translateX(-50%);
}

今後の参考のために。

于 2015-07-10T14:02:57.213 に答える
0

margin：autoは、幅があり、左右のマージンを等しく設定するオブジェクト用です。

Divは基本的にFULL-WIDTH（100％）のBLOCKであるため、margin：autoを設定しても、幅が親に対していっぱいであるため、何も取得されません。

それを機能させるには、2つの方法でそれを行うことができます。

  1. divにtext-align：centerを使用->これにより、divcenter内のテキストが整列されます
  2. divにwidthプロパティ（つまりwidth：200px）を含めると、正常に機能します。
于 2013-03-26T00:53:08.353 に答える