在离子中垂直对齐行中的列

Posted 2023-03-05

【中文标题】在离子中垂直对齐行中的列

【英文标题】：Vertically align column in row in Ionic

【发布时间】：2015-11-03 12:29:17

【问题描述】：

我有以下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 它仍然没有跨越屏幕的整个高度......有什么想法吗？

【参考方案1】：

似乎 Ionic 框架添加了一个动态类 scroll 包装该行。将height: 100% 也添加到父scroll。

.row, .scroll 
  height: 100%;

输出：

Ionic Demo

【讨论】：

完美运行！谢谢。也许只有我一个人，但从移动的角度来看，如果内容区域默认跨越 100%，我会发现它更直观。

是的，我也会喜欢的。但它因开发人员的观点和标准方式而异；）