代码之家 › 专栏 › 技术社区 › user818700

在Ionic中垂直对齐行中的列

flexbox vertical-alignment ionic-framework css

user818700 · 技术社区 · 10 年前

我有以下内容 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%;" 到我的 一行 它不起作用,行的高度仍然与内容相符。即使我加上 !important 它仍然没有跨越屏幕的整个高度…有什么想法吗?