在 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;
}

Answer 1

Ionic 2 有一些有用的 Utility Attributes 可以添加到元素中。

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

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

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

Answer 2

更新

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

<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 属性 fab-center 使 button 居中，如下所示：~~

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

~~您可以在 Ionic2 docs.~~

中找到有关 Ionic2 属性的更多信息

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

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

Answer 3

@sebferras 的答案对于 Ionic 2 >2.0.0 版本不再正确

您必须将按钮包裹在 div 中并应用 text-center。

<div text-center>
   <button ion-button large>
     Click Here
   </button>
</div>

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

Correct method to center elements in ionic2

html

css

ionic2

ionic3