css - css で要素を中央に配置できません

Question

テンプレートをダウンロードして編集しました。one_third今、要素を中央に配置したいのですが、

margin-left: auto;
margin-right: auto;

動作しません。

これは jsfiddle のテンプレートです。

誰でも私を助けることができますか？

Answer 1

margin-left:auto;とが機能するにはmargin-right:auto;、要素に幅が必要です。したがって、次のようなものを試してください。

margin-left: auto;
margin-right: auto;
width: 600px;

アップデート：

あなたはいつもあなたの例を変えているように見えるので、ここに方法displayとmargins働きの非常に基本的な理解があります：

ボックスを別のボックスの中央に配置するには、次の2つのことを行う必要があります。

a）外側のボックスに幅を与えます（そうでない場合、内側のボックスは何を中心に置くべきかわかりません

b）内箱が必要margin: 0 autoです（これはと同じですmargin-left: auto; margin-right: auto;）

また、両方のボックスはブロックレベルの要素である必要があります（つまり、持っているdisplay: block、ないdisplay: inline;）

まとめると、次のようになります。

HTML：

<section id="outer">
    <section id="inner"></section>
</section>

CSS：

#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

これにより、幅600pxの赤いボックスの中央に200pxx200pxの緑色のボックスが表示されます。

ここで、緑色のボックス内に2つの要素を並べて配置する場合は、そこにインライン要素を追加できます。

<section id="outer">
    <section id="inner">
        <article>Hi</article>
        <article>Hi agian!</article>
    </section>
</section>



#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}
#inner article {
    display: inline;
}