离子3中心对齐离子内容，以便在更宽的屏幕上看起来更好

Question

我使用ionic 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

为此，您需要使用离子网格系统。如果你需要为所有设备视图端口开发响应式应用程序，那么网格是最好的。

网格是一个功能强大的移动第一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显示时，该列将缩放为使用12空间中的8，使用2空间中的offset，这意味着它将是这样的：2 - 8 - 2，所以基本上内容将是centered。