Saya perlu meninggalkan ruang di bahagian atas dan bawah imej supaya ia akan berpusat dan kol ion akan turun.
<ion-content [fullscreen]="true" class="bg-class" text-center> <ion-img src="assets/icon/moon_logo.png" style="width:80%; margin: auto;"> </ion-img> <ion-col> <div style=" margin: auto; padding-bottom: 15px;"> <ion-button expand="block" style="--background:white; color: #1B0B50;">Login</ion-button> </div> <div style="margin: auto;"> <ion-button expand="block">Get Started</ion-button> </div> <ion-row style="justify-content: center;"> <p style="color: #576898; font-size: 12px;">Privacy Policy</p> <p style="color: #576898; font-size: 12px; padding-left: 20px;">Terms Of Use</p> </ion-row> </ion-col> </ion-content>
Hasil paparan yang dijangkakan
Pertama, gunakan ion-col dalam ion-row dan ion-row dalam ion-grid, jika tidak, anda akan melihat hasil yang tidak dijangka. Terdapat banyak penyelesaian sekarang, salah satunya adalah dengan menggunakan flex dan flex-grow: