Question

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

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;
}

enter image description here

Answer 1

我知道这个话题很老了...... 但是对于未来当人们研究这个（像我一样）时，这对我有用：如果您只想在一个页面中执行此操作，请将其添加到页面

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

@HP

<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>

Answer 2

您可以使用display：table并在父元素上设置高度/宽度来简化css。

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

Demo

垂直对齐按钮在离子中无滚动

2 个答案: