如何对齐圆圈？

Question

我有4个圆圈，必须与中心对齐（垂直和水平）。 我怎么能这样啊？

的jsfiddle

这是我的模板：

<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属性不起作用。 先感谢您。

Answer 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对齐中心的项目（垂直和水平）。 然后我们设置display: flex; 在.row元素上，并告诉它在圆圈之间平均分隔。

Answer 2

这是我的方法。 它接近但不是100％以X轴为中心。 更好的方法是使用flexbox因为你已经通过离子框架使用它了。

  .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>