Как центрировать выравнивание кругов?

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; 
} 

вертикального выравнивания: средний и 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>