html - 如何对齐包含多个div的div以居中对齐

Question

我正在尝试将 foo 的所有 block 与网页的水平中心对齐。

请参阅下面的代码-

<div id="cert" style="display:block; align:center;">
  <div class="foo" style="background-color:violet;"></div>
  <div class="foo" style="background-color:indigo;"></div>
  <div class="foo" style="background-color:blue;"></div>
  <div class="foo" style="background-color:green;"></div>
  <div class="foo" style="background-color:yellow;"></div>
  <div class="foo" style="background-color:orange;"></div>
  <div class="foo" style="background-color:red;"></div>
  <div class="foo" style="background-color:silver;"></div>
</div>

foo 类

.foo {
float: left;
width: 40px;
height: 40px;
margin: 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
border-radius: 5px;
}

Answer 1

如果您的目标是将所有 div 水平排列在一行中，请使用:

.foo {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    border-radius: 5px;
    display:inline-block;
}
#cert {
    text-align:center;
}

<div id="cert" style="display:block; align:center;">
    <div class="foo" style="background-color:violet;"></div>
    <div class="foo" style="background-color:indigo;"></div>
    <div class="foo" style="background-color:blue;"></div>
    <div class="foo" style="background-color:green;"></div>
    <div class="foo" style="background-color:yellow;"></div>
    <div class="foo" style="background-color:orange;"></div>
    <div class="foo" style="background-color:red;"></div>
    <div class="foo" style="background-color:silver;"></div>
</div>

在父 div 上使用 text-align:center 使其内容居中，然后删除子 div 上的 float:left 并改为使用 display:inline - block 。