1

私はこのHTMLを持っています: 

<div id="container">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
</div>

そしてこのCSS： 

#container {
    overflow: hidden
}

article {
    float:left;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

幅を指定せずに #container を中央揃えにしたい。出来ますか？
これがフィドルです。

編集:記事に合わせて #container の幅を変更する必要があります。本文の幅が 450px の場合、1 行に 2 つの記事があるため、コンテナの幅は約 400px にする必要があります。本文の幅が 1100px の場合、1 行あたり 5 つの記事になるため、コンテナーの幅は約 1000px にする必要があります。

4

5 に答える 5

4

次のようなものを試すことができます（jsfiddle）：

HTML:

<html>
    <body>
        <div id="container">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </div>
    </body>
</html>​

CSS:

html, body { margin: 0; padding: 0; }
body { text-align: center; }

#container {
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    text-align: left;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}
​
于 2012-12-21T23:29:03.603 に答える
1

物品をコンテナ内で中央に配置しながら、包装を可能にするということですか? その場合（jsfiddle）：

#container {
    text-align: center;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}
​
于 2012-12-22T00:39:33.073 に答える
1

いくつかのオプションを検討した結果、メディア クエリを使用する方が簡単な方法であることがわかりました。

この場合、次のようになります。

@media (max-width: 420px) {
    #container {
        width: 210px;
    }
}

@media (min-width: 420px) and (max-width: 630px) {
    #container {
        width: 420px;
    }
}

@media (min-width: 630px){
    #container {
        width: 630px;
    }
}

これがフィドルです。

于 2012-12-31T02:52:17.683 に答える
0

取り出しfloat: left;て追加margin:auto;

于 2012-12-21T23:22:06.143 に答える