html - センタリングの仕方内部の内容に影響を与えずに?

Question

これを<div>ページの中央に配置する必要がありますが、を使用するalign=centerと、div 内のコンテンツの一部も影響を受けます。これを防ぐ方法はありますか？

Answer 1

CSS を使用できます (div には幅も指定する必要があります。@j08691 コメントを参照してください)。

div { margin: 0 auto; }

div#コンテナーの ID ( ID を示す) やクラス (クラスを示す)など、より具体的なセレクターに変更する必要があります.。

例：

#myDivID {}
.myDivClass {}

これが機能する理由は、レンダリング エンジンが常に、 に指定されたコンポーネントのサイズを最適化し、バランスを取ろうとするためautoです。ここでmargin: 0 autoは、次の省略形です。

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

ここでは、ブラウザは の上部と下部にマージンを適用しませんがdiv、左右のマージンが両方とも に設定されてautoいることを確認すると、残りのマージンを分割してそれらを互いに等しくしようとします (そして成功します)。スペース。これにより、divがページの中央に押し出されます。

Answer 2

これを見てください。これで問題が解決するはずです

HTML

<div id="outer">'
    dsadkjahdkjasgud
    dbsudbasjdhbasjkdh<br />
    dbsudbasjdhbasjkdh<br />
    <div id="innerCenter">
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />dbsudbasjdhbasjkdh<br />
    </div>
</div>

CSS

#outer{
        width : 500px;
     background-color:green;

}

#innerCenter{ 
    margin:0 auto;
    width : 50%;
     background-color:red;
}

**注: レイアウトに応じて幅を変更できます

フィドル: http://jsfiddle.net/aasthatuteja/zKstw/