Question

所以基本上我用div制作了这些块，这是我的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;
}

我已经尝试了很多边缘对齐策略和其他东西来让每一排块对齐到中心，尽管我无法理解它。任何人都可以解决这个问题吗？我真的很感激。

Answer 1

其中一个选项是为容器（如.container）提供类（或其他标识符），并将内部内容的布局更改为内联，以便它可以text-align: center为中心：

 .container { text-align:center; }

JSFiddle

另一种选择是使用表格布局（display: table适用于.container和display: table-cell适用于内部内容）。然后，您可以轻松地将.container与margin: 0 auto对齐。

JSFiddle

Answer 2

不要漂浮块
让它们显示：inline-block
text-align：居中父母

http://jsfiddle.net/9Akaw/

#parent {
    text-align: center;
}
.cp {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 10px;
}


<div id="parent">
  <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 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>

Answer 3

尝试使用如下： Link

HTML：

<div class="center">
    <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>

CSS：

.center {
    margin:0 auto;
    display:block;
    text-align:center;
}

.cp {
    /* these styles will let the divs line up next to each other
       while accepting dimensions  float: left;*/
    display: inline-block;
    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;
}

CSS对齐小Div块

3 个答案:

JSFiddle

JSFiddle