将这四个圆圈水平居中

Question

我试图将这组圆圈水平放置，并以这样的方式将它们包裹成四个单独的圆圈。这可能是一种甚至设置它的糟糕方式，所以任何建议都值得赞赏。

保证金：自动似乎没有效果。

http://jsbin.com/rutirowari/edit?html,css

Answer 1

您需要将text-align: center应用于.container

Answer 2

▶1 ^st 选项：

使圈子居中的最简单方法是使用：

.container {
    text-align: center;
}

jsFiddle：→here。

<强>段：

.container {
  text-align: center;
  background-color: pink;
}
.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.red, .blue, .yellow, .green {
  display: inline-block;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="redblue">
    <div class="red circle"></div>
    <div class="blue circle"></div>
  </div>
  <div class="yellowgreen">
    <div class="yellow circle"></div>
    <div class="green circle"></div>
  </div>
</div>

▶2 ^nd 选项：

使圈子居中的另一种方法是使用flexbox并为 .container 设置以下属性：

.container {
    display: flex;
    justify-content: center;
}

jsFiddle：→here。

<强>段：

.container {
  background-color: pink;
  display: flex;
  justify-content: center;
}
.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.red, .blue, .yellow, .green {
  display: inline-block;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="redblue">
    <div class="red circle"></div>
    <div class="blue circle"></div>
  </div>
  <div class="yellowgreen">
    <div class="yellow circle"></div>
    <div class="green circle"></div>
  </div>
</div>