在 ionic2 中居中元素的正确方法

Question

我在页面上放置了一些文本和一个按钮。我目前使用我所知道的传统 css 方法将其居中。这是在 IONIC 2 中居中的正确方法吗？

 <ion-content padding class="login-signup">

  <ion-card>

  <div class="or-label">
   SOME-TEXT
  </div>

  <div class="signup-button">
    <button outline>Signup</button>
  </div>

</ion-content>

//对应的css

  .or-label {
    width: 20%;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 2em;
    height: 50px;
    text-align: center;
    color: red;
  }

.signup-button {
  text-align:center;
}

原文由 runtimeZero 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

就像@AndrewGraham-Yooll 在他的回答中提到的那样， fab-center 属性在几个版本前被删除了，所以现在唯一的方法是使用带有 text-center 的容器 效用属性

<ion-content padding class="login-signup">

  <ion-card text-center>
    <div class="or-label">
      SOME-TEXT
    </div>
    <button outline>Signup</button>
  </ion-card>

</ion-content>

---

您可以通过添加 Ionic2 属性将--- 居中 button fab-center 如下所示：

<button fab-center outline>Signup</button>

您可以在 Ionic2 文档 中找到有关 Ionic2 属性的更多信息。

关于另一个 div ，因为它不是 Ionic 组件（如按钮或标签），您应该使用一些传统的 css rules 将其居中，就像您正在做或使用 Utility属性 如 text-center 。

另请注意，在您的代码中，缺少结束标记： </ion-card>

原文由 sebaferreras 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Ionic 2 有一些有用的 实用属性 可以添加到元素中。

在这种情况下，添加 text-center 到元素将应用 text-align: center 属性，使其内部内容居中。

使用您的代码的示例类似于…

 <ion-card text-center>
    <div class="or-label">
        SOME-TEXT
    </div>
    <button outline>Signup</button>
</ion-card>

原文由 Will.Harris 发布，翻译遵循 CC BY-SA 3.0 许可协议