जिस समस्या में मैं चल रहा हूं वह यह है कि मुझे अपनी स्क्रीन के केंद्र में 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
MarkW1998 23 अक्टूबर 2019, 15:48

1 उत्तर

सबसे बढ़िया उत्तर

page.scss add जोड़ें

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

https://prnt.sc/pn3ey9

1
MD Khali 23 अक्टूबर 2019, 13:46