web-dev-qa-db-ja.com

メインのdivコンテナーを中央に揃える方法は？

私がこれまで管理している唯一の方法は、次のようにcssファイルに追加することです。

*{
padding:auto;
margin:auto;
text-align:centre;
}

次を使用して他のページを見ました：*{padding:0px;margin:0px}しかし、メインコンテナを集中管理するためにどこで何を行っているのかわかりません。

誰も方法を説明できますか？

コード例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

次のページで誰がどのようにそれを行うのか説明できますか？

http://www.csszengarden.com/?cssfile=/179/179.css&page=4

csshtmlalignment
19
Amra

*セレクターはページ上のすべての要素に適用されるため、使用しないでください。次のような構造があるとします。

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

次に、次を使用して#content divを中央に配置できます。

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

あなたが他の場所で見たことを知らないが、これは行く方法です。これまでに見た* { margin: 0; padding: 0; }スニペットは、すべてのブラウザーのブラウザーのデフォルト定義をリセットして、サイトがすべてのブラウザーで同様に動作するようにするためのものです。これはメインコンテナーの中央揃えとは関係ありません。

ほとんどのブラウザは、デフォルトのマージンとパディングをいくつかの要素に適用しますが、これは通常、他のブラウザの実装と一貫性がありません。このため、この種の「リセット」を使用することが賢明と考えられることがよくあります。提示したリセットスニペットは、最も単純なリセットスタイルシートです。このテーマの詳細については、こちらをご覧ください。

39
Tatu Ulmanen

ページの中央揃えの基本原則は、ボディCSSとメインコンテナーCSSを持つことです。次のようになります。

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}
3
Kids Formal

テキストを整列させることができます：ボディを中央に配置してコンテナを中央に配置します。次に、text-align：コンテナから離れて、すべてのテキストなどを取得して左揃えにします。

3
Megan

* { text-align:center }宣言は、すべての要素の中央揃えを設定するため、省略します。

通常は固定幅コンテナmargin: 0 autoで十分です

1
Juraj Blahunka