Адаптивная центрированная сетка 2x2 в угловых ионах - PullRequest
Новая
       18

Адаптивная центрированная сетка 2x2 в угловых ионах

0 голосов
/ 23 октября 2019

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить сетку 2 x 2 в центре моего экрана. Это код, который я до сих пор на HTML. Просто чтобы прояснить, что проект создается для собственного мобильного приложения. 

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Testing
    </ion-title>
  </ion-toolbar>
</ion-header>
<app-navbar></app-navbar>

<ion-content color="primary">
  <ion-grid class="ion-justify-content-center">
    <ion-row class="ion-align-items-center">
      <ion-col>
        <div>
          1 of 4
        </div>
      </ion-col>
      <ion-col>
        <div>
          2 of 4
        </div>
      </ion-col>
    </ion-row>
    <ion-row class="ion-align-items-center">
      <ion-col>
        <div>
          3 of 4
        </div>
      </ion-col>
      <ion-col>
        <div>
          4 of 4
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Он застрял на левой стороне, а когда я удаляю тег ion-content, он идет вверх по центру, но не в серединеэкран, где я бы хотел, чтобы это было. Любая помощь будет оценена.

Грубый макет, как я хочу, чтобы это было

1 Ответ

1 голос
/ 23 октября 2019

добавить page.scss 

ion-grid{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

https://prnt.sc/pn3ey9

...