在 Ionic 中垂直对齐行中的列

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 框架似乎添加了动态 class scroll 包装行。也将 height: 100% 添加到父级 scroll。

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

输出：

Ionic Demo

在 Ionic 中垂直对齐行中的列

Vertically align column in row in Ionic

css

vertical-alignment

flexbox

ionic-framework

ionic