css – 垂直对齐Ionic中的行

前端之家收集整理的这篇文章主要介绍了css – 垂直对齐Ionic中的行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下离子视图:
<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.现在我明白,这样做的唯一方法就是我的行占据了100%的高度.然而,如果我继续添加style =“height:100%;”在我的行中它不起作用,行的高度仍然包含在它的内容中.即使我添加!重要它仍然没有跨越屏幕的整个高度…任何想法?

解决方法

看起来像Ionic框架添加了一个包裹行的动态类滚动.向父卷轴添加高度:100%.
.row,.scroll {
  height: 100%;
}

输出

Ionic Demo

猜你在找的CSS相关文章