Ionic开发：如何设置元素间距？实现图片居中与ion-col下移

你需要实现的是：给ion-img添加上下间距并在ion-content中居中，让下方的ion-col组件向下移动，同时设置两个div之间的间距。以下是修改后的代码和说明：

修改后的完整代码 #

<ion-content [fullscreen]="true" class="bg-class" text-center>

  <!-- 给ion-img添加上下间距并保持水平居中 -->
  <ion-img src="assets/icon/moon_logo.png" style="width:80%; margin: 40px auto;"></ion-img>

  <!-- 让ion-col整体向下移动，适配页面底部区域 -->
  <ion-col style="margin-top: auto; padding: 0 20px;">
    <!-- 两个div之间通过margin-bottom设置间距 -->
    <div style="margin: auto; margin-bottom: 15px;">
      <ion-button expand="block" style="--background:white; color: #1B0B50;">Login</ion-button>
    </div>
    <div style="margin: auto; margin-bottom: 30px;">
      <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>

关键调整说明 #

• ion-img的上下间距与居中：把原来的margin: auto改成margin: 40px auto，40px是上下间距值，可根据需求调整，auto保证元素水平居中。
• ion-col向下移动：给ion-col添加margin-top: auto，因为ion-content在fullscreen=true时是flex布局，这个属性会自动将ion-col推到页面下方；额外添加padding: 0 20px避免按钮贴住屏幕边缘。
• 两个div之间的间距：给第一个按钮容器添加margin-bottom: 15px（替换原有的padding-bottom），直接拉开两个按钮的间距；同时给第二个按钮容器加margin-bottom: 30px，让按钮和底部的文字链接区域保持合适距离，更贴合预期布局。

内容的提问来源于stack exchange，提问作者rameez khan