如何對齊圓圈？

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>