Ionic 离子如何给予空间之间的2个divs

nom7f22z 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(183)

我需要在图像顶部和底部给予空间，这样它将来到中心和离子柱将下降。

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

要显示的预期结果

ionic-framework

来源：https://stackoverflow.com/questions/74686976/ionic-how-to-give-space-between-2-divs

2条答案

按热度按时间

dm7nw8vv1#

首先，在ion-row中使用ion-col，在ion-grid中使用ion-row，否则您将看到意想不到结果。现在有许多解决方案，其中一种是使用flex和flex-grow：

<ion-content [fullscreen]="true" class="bg-class" text-center>
  <div style="display: flex; flex-direction: column; justify-content: center; width: 
  100%; height: 100%;">
    <div style="flex-grow: 10;">
    </div>
    <ion-img src="assets/icon/moon_logo.png" style="width:80%; margin: auto;">
    </ion-img>
    <div style="flex-grow: 10;">
    </div>
    <ion-grid>
      ...
    </ion-grid>
  </div>
</ion-content>

赞(0）回复(0）举报 2022-12-08

gopyfrb32#

Ionic为这类内容提供了css实用程序：https://ionicframework.com/docs/layout/css-utilities

赞(0）回复(0）举报 2022-12-08