html - div内の要素を水平方向に中央揃え

Question

そのため、3つまたは4つの正方形を中心に配置したレイアウトを作成する必要があります。現在、多くの異なる画面があり（現在、21のフィリップス、macbook 13、およびipadがあります）、それらすべてで正方形が異なります。

だから私はそれをどの画面の中央にも配置する必要があります。ここに私のコードのいくつかがあります：

一部のCSS：

#main{
border: 1px solid red;
margin: auto;
}
#block{
display: inline-block;
padding: 110px;
border: 1px solid red;
margin: 10px 10px;
overflow:hidden;
}

一部のHTML：

<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div style="clear:both"></div>
</div>
</div>

私はいくつかの追加のdivでさまざまな方法を試しました...

だから私はこの正方形がどの画面でも自動的に中央に配置される必要があります

Answer 1

を使用しているだけなのでinline-block、コンテナのテキストを中央に配置できます。

また、一意でない要素にはクラスを使用します。

フィドル： http： //jsfiddle.net/LWTNB/3/

更新されたHTML：

<div id="wrapper">
    <div id="header">
        header
    </div>
    <div id="main">
        <div class="block">main</div>
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div>
    </div>
</div>

更新されたCSS：

#main{
    border:1px solid red;
    text-align:center; /* solution */
}

.block{
    display:inline-block;
    padding:110px;
    border:1px solid red;
    margin:10px 10px;
    overflow:hidden;
}