Как выровнять по центру круги в ionic с помощью CSS?

Question

[alexnotonfire]

У меня есть 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;
  }

JSFiddle

Answer 1

[Антон Федорян]

Можно так как вариант jsfiddle.net/yk62zsxv/24

Comments

[Антон Федорян]

Можно еще через flex попробовать

[Fetur]

Я может глуповат, но причем здесь angular?

Answer 2

[Fetur]

jsfiddle.net/qsanw7oL

Когда будете себе вставлять, не забудьте, что для других бразуеров нужно указывать свои префиксы, чтобы работало.

Comments

[alexnotonfire]

Я использую Ionic фреймворк, эта штуковина на любых основных мобильных платформах обворачивает приложение в свою браузерную оболочку, поэтому беспокоится не стоит. ionicframework.com