Masalah yang saya hadapi adalah saya tidak bisa mendapatkan kisi 2 x 2 di tengah layar saya. Ini adalah kode yang saya miliki sejauh ini di HTML. Hanya untuk memperjelas proyek sedang dibangun untuk aplikasi seluler asli.

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

Itu menempel di sisi kiri dan ketika saya menghapus tag ion-content itu terpusat di atas tetapi tidak di tengah layar di tempat yang saya inginkan. Bantuan apa pun akan dihargai.

Mockup Kasar tentang bagaimana saya menginginkannya

-1
MarkW1998 23 Oktober 2019, 15:48

1 menjawab

Jawaban Terbaik

Tambahkan page.scss

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

https://prnt.sc/pn3ey9

1
MD Khali 23 Oktober 2019, 13:46