8

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

3 回答 3

9

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>
于 2016-06-28T09:17:54.860 回答
8

@sebferras 的答案对于发布 Ionic 2 >2.0.0 不再正确

您必须将您的按钮包裹在 adiv和 applytext-center中。

<div text-center>
   <button ion-button large>
     Click Here
   </button>
</div>
于 2017-02-15T14:58:16.110 回答
6

更新

就像@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，因为它不是 Ionic 组件（如按钮或标签），您应该使用一些传统的方式将其居中，css rules就像您正在做的那样或使用Utility 属性（如text-center.

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

于 2016-06-28T10:37:52.223 回答