Question

我使用离子3创建了我的网站。整体来说它非常棒。但是在更宽的屏幕上，整个页面都是左对齐的，或者我应该说离子内容呈现左对齐。

离子含量部分如下所示。请告知如何使其居中对齐。

<ion-content padding style="max-width:1440px;height:100%;background: url('assets/images/background.png') no-repeat center center;background-repeat:no-repeat;background-size:100% 100%" >

 ...

Answer 1

您需要使用Ionic Grid system。如果您需要为所有设备查看端口开发响应式应用程序，那么Grid是最好的。

网格是一个功能强大的移动优先Flexbox系统，用于构建自定义布局。它受Bootstrap网格系统的影响很大。

如果您需要居中，可以按照以下所示进行操作。

<ion-content>
    <ion-grid>
      <ion-row>
        <ion-col col-12 col-md-8 offset-md-2>
          //your content here
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

<ion-col col-12 col-md-8 offset-md-2>这意味着它将开始使用整个列，当它移动到medium size显示时，该列将缩放以使用8空格中的12，其中offset为{ {1}}空格，意思是这样的：2，所以内容基本上都是2 - 8 - 2。

离子3中心对准离子含量，在更宽的屏幕上看起来更好

1 个答案: