在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有一些有用的实用程序属性,可以添加到元素中.

在这种情况下,添加text-center到元素将text-align: center属性应用于它,导致其内部内容居中.

使用您的代码的示例将是...

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

Answer 2

@sebferras的回答不再适用于Ionic 2> 2.0.0的发布

你必须把你的按钮包住div并申请text-center.

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

Answer 3

更新

就像@ 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>

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

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

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

至于其他的div,因为它不是一个离子组分(如按钮或标签),你应该使用一些传统的中心,它css rules就像你正在做或使用工具属性一样text-center.

另请注意,在您的代码中,有一个缺少的clossing标记: </ion-card>