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

我在页面上放了一些文字和一个按钮.我当前正在使用我所知道的传统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;
}

解决方法

更新

就像@ AndrewGraham-Yooll在他的回答中提到的那样,fab-center属性在几个版本之前被移除了,所以现在唯一的方法就是使用带有文本中心的容器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 fab-center outline>注册< / button>

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

关于另一个div,因为它不是一个离子组件(如按钮或标签),你应该使用一些像你正在做的传统css规则或使用像文本中心这样的Utility attribute.

另请注意,在您的代码中,有一个缺少的clossing标记：< /离子卡和GT;

原文地址：https://www.jb51.cc/html/228423.html