垂直对齐离子中的行

Question

我有以下内容ion-view:

<ion-view view-title="Success" ng-controller="successController" class="success-view">
  <ion-content>

    <div class="row row-center">
      <div class="col">

        <h1>Success!</h1>

        <h3>Your login credentials will be SMSed to you shortly</h3>

        <button class="button button-block button-positive" ui-sref="login">
          Okay
        </button>

      </div>
    </div>

  </ion-content>
</ion-view>

我正试图col在屏幕上垂直对齐它.现在我明白,这是唯一可行的方法就是如果我row占据了100%的高度.然而,如果我继续添加style="height: 100%;"到我的row它不起作用,行的高度仍然包含它的内容.即使我添加!important它仍然没有跨越屏幕的整个高度...任何想法？

Answer 1

看起来像Ionic框架添加了一个scroll包装行的动态类.同时添加height: 100%到父级scroll.

.row, .scroll {
  height: 100%;
}

输出:

离子演示