javascript - 垂直对齐按钮在 Ionic 中没有滚动

Question

我在这里按照这个例子来创建没有滚动的垂直按钮

http://codepen.io/mhartington/pen/gcHeL

CSS

  .scroll-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

HTML

  <ion-content has-header="true" padding="true">
    <div class="row row-center">
      <div class="col col-center">
        You need to login
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button class="button button-block button-positive">
          Go to Login
        </button>
      </div>
    </div>
  </ion-content>

但是，CSS 似乎破坏了 button-block，因为它不再是完全扩展宽度的按钮。谁能告诉我这是为什么以及如何解决？

谢谢

更新 1

这将使它不那么垂直居中:

.scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Answer 1

我知道这个话题很老...但是对于 future 当人们研究这个(就像我一样)时，这对我有用:如果您只想在一个页面中执行此操作，请将此添加到页面

<style>
.scroll-content{
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

@惠普

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

我想你的问题是上面的这个 div 它们正在改变 div 位置，就像你居中然后这个 col-center 再次居中，在数学上你得到了页面的 50%，而不是左边的 50%再降50%(一共75%)，其他的，然后全部变

<div class="list">

  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
</div>