Как центрировать дочерние строки flexbox?

Question

У меня есть коробки flexbox с двумя рядами внутри (один для значка, другой для текста). Мне нужно по вертикали и горизонтали центрировать мои две строки (прямо сейчас, только 2-я центрирована) внутри моего дочернего блока ... но я не могу это сделать ..

Вот мой HTML-шаблон:

<ion-col *ngFor="let header of headers; let i = index;" size="6" (click)="openTimeline(header.ID)">
  <div class="row">
    <ion-icon name="{{icons[i]}}"></ion-icon>
  </div>
  <div class="rox">{{ header.title }}</div>
</ion-col>

Мой CSS один:

ion-col {
  text-align: center;
  flex-wrap: wrap !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
  width: 100%;
  font-size: 1.15em;
  margin: 0.6vh 0;
  border: 5px solid white;
  font-weight: bolder;
  box-sizing: border-box !important;
  border-radius: 10px;
}

.row {
  display: flex !important;
  width: 100%;
  height: 2em;
  align-items: center !important;
  justify-content: center !important;
}

Есть идеи?

Answer 1

Опечатка: <div class="rox">{{ header.title }}</div>, поэтому классы row не относятся ко второму ряду. Это должно быть <div class="row">{{ header.title }}</div>

Также наши строки отображаются в виде столбца. Если вы отобразите их как ряд, они будут накапливаться сверху вниз. Вы также должны удалить width: 100% на .col, иначе они будут слишком большими, чтобы быть рядом.

ion-col {
  text-align: center;
  flex-wrap: wrap !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row; // element side by side
  width: 100%;
  font-size: 1.15em;
  margin: 0.6vh 0;
  border: 5px solid white;
  font-weight: bolder;
  box-sizing: border-box !important;
  border-radius: 10px;
}

.row {
  display: flex !important;
  // width: 100%; that's making one row taking all the space on the line
  height: 2em;
  align-items: center !important;
  justify-content: center !important;
}