CSS Center Responsive DIV

Question

画像1に表示される「タイル」（白いボックス）は、ユーザーの画面に反応します。画面のサイズが十分に大きくない場合は、右側に隙間ができます。私は何をしたいここでは画像2に見られるような結果を得るためであるそれらの特定の要素のために、これまでの私のコード..です

HTML：

<div class="main"> 
    <div class="inner"> 
     <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div> 
    </div> 
</div> 

CSS：

.main{ 
    width:100%; 
    background: #000; 
} 

.main .inner{ 
    margin:10px; 
    min-width: 140px; 
    background: red; 
} 

.main .inner .tile{ 
    margin:10px; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

IMAGE 1：

IMAGE 2：

Answer 1

ためtext-align: centerを持っているあなたは、メディアでこれを行うことができますさまざまなブラウザの幅で.innerクラスの幅を設定するクエリを実行した後、margin-leftとmargin-rightプロパティをに設定しますを中央に配置します。 .innerクラスの上余白と下余白を設定する代わりに、.mainクラスのpadding-topとpadding-bottomプロパティを設定します。 .innerクラスのpaddingクラスと.tileクラスのborderクラスの組み合わせを使用して、タイルを均等に10px離して配置します。この例では、私は唯一の800ピクセルまで行っているCSS media queries

example

CSS各ブラウザの幅のメディアクエリを設定し

.main{ 
    width: 100%; 
    background: #000; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.main .inner{ 
    padding: 5px; 
    font-size: 0px; 
    display: table; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: red; 
} 

.main .inner .tile{ 
    margin: 0px; 
    padding: 0px; 
    border: 5px solid red; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

、：メディアクエリの詳細については

必要に応じて追加することができます。

CSS（続き）

@media (min-width: 280px) { 
    .main .inner{ 
     width: 130px; 
    } 
} 

@media (min-width: 320px) { 
    .main .inner{ 
     width: 260px; 
    } 
} 

@media (min-width: 480px) { 
    .main .inner{ 
     width: 390px; 
    } 
} 

@media (min-width: 640px) { 
    .main .inner{ 
     width: 520px; 
    } 
} 

@media (min-width: 800px) { 
    .main .inner{ 
     width: 780px; 
    } 
} 

メディアクエリは10pxの境界と.tileの幅130pxの倍数に.innerの幅を設定するために使用されています。

あなたは、.tileクラスに.innerクラスのpaddingをborderを変更する必要がありますタイル間の間隔を変更したい場合は、それぞれに指定され.mainクラスとwidth上margin-topとmargin-bottomメディアクエリ。

Answer 2

.main .inner{ 
    min-width: 140px; 
    background: red; 
    text-align:center; 
    } 

テキスト整列追加：あなたは.innerのための最大幅を設定することができhttp://jsfiddle.net/dolours/afKgg/

Answer 3

センターのCSSプロパティを、その後.main