如何居中对齐圆？答案

【问题标题】：How to center align circles?如何居中对齐圆？
【发布时间】：2016-08-13 13:42:42
【问题描述】：

我有 4 个圆圈，它们必须与中心对齐（垂直和水平）。我怎样才能做到这一点？

这是我的模板：

<ion-content has-header="false">
   <div class="dashboard-grey-menu">
     <div class="row no-padding">
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
     </div>
   </div>
 </ion-content>

CSS

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
}

.circle { 
  border-radius: 50%; 
  width: 10vw;
  height: 15vh;
  background-color: #B7B7B7;
}

vertical-align: middle 和 text-align: center 属性不起作用。提前谢谢你。

【问题讨论】：

标签： html css ionic-framework

【解决方案1】：

使用flexbox显示类型，可以轻松实现：

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.circle {
  border-radius: 50%;
  width: 10vw;
  height: 15vh;
  background-color: #B7B7B7;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div class="dashboard-grey-menu">
  <div class="row no-padding">
    <div class="col">
      <div class="circle">Foobar</div>
    </div>
    <div class="col">
      <div class="circle">Foo</div>
    </div>
    <div class="col">
      <div class="circle">Bar</div>
    </div>
    <div class="col">
      <div class="circle">Baz</div>
    </div>
  </div>
</div>

首先，我们将.dashboard-grey-menu 设置为display: flex;，并使用justify-content 告诉它在中心（垂直和水平）对齐项目。然后我们在.row元素上设置display: flex;，并告诉它等分圆圈之间的空间。

【讨论】：

也许你能知道答案。如果我想在圆圈内插入一些文字，我会怎么做？也在中间。
@BillyLogan flexbox 再次拯救了这一天。请参阅我的编辑。 :)
你让我想读一本关于 flexbox 的书。非常感谢！
col 类未使用

【解决方案2】：

这是我的方法。它很接近，但不是 100% 以 X 轴为中心。最好使用flexbox，因为无论如何您已经通过 ionic 框架使用它了。

  .dashboard-grey-menu {
    height: 30vh;
    background-color: #959595;
    position: relative;
  }

  .circle {
    border-radius: 50%;
    width: 10vw;
    height: 15vh;
    background-color: #B7B7B7;
    margin-left: 6vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<div class="dashboard-grey-menu">
   <div class="row no-padding">
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
   </div>
 </div>

【讨论】：

非常感谢您的方法。以后会考虑的。