html - CSS 对齐小 Div block

Question

所以基本上我用 div 制作了这些 block ，这是我的 HTML:

    <div>
    <div class="cp" style="background-color: #FF6947;"></div>
    <div class="cp" style="background-color: #9400DE;"></div>
    <div class="cp" style="background-color: #16B5C9;"></div>
    <div class="cp" style="background-color: #0B399C;"></div>
    </div>
    <div>
    <div class="cp" style="background-color: #E3426A;"></div>
    <div class="cp" style="background-color: #ED1313;"></div>
    <div class="cp" style="background-color: #52E342;"></div>
    <div class="cp" style="background-color: #1BA30B;"></div>
    </div>

然后我的 CSS 是这样的:

.cp{
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 30px;
    height: 30px;
    background: black;

    /* a small margin to separate the blocks */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

我已经尝试了很多边距对齐策略和其他方法来让每行 block 对齐到中心，尽管我就是无法理解它。有人能弄清楚吗？我真的很感激。

Answer 1

其中一个选项是为容器(如 .container)提供类(或另一个标识符)并将内部内容的布局更改为内联，以便它可以通过 text-align 居中: 中心:

 .container { text-align:center; }

JSFiddle

另一种选择是使用表格布局(display: table 应用于 .container 和 display: table-cell 应用于内部内容).然后，您可以轻松地将 .container 与 margin: 0 auto 居中。

JSFiddle