Блог

Я последовал этому примеру здесь, чтобы создать вертикальную кнопку без прокрутки

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

я знаю, что эта тема старая… но на будущее, когда люди исследуют это (как я), это помогло мне: если вы пытаетесь сделать это только на одной странице, добавьте это на страницу

 <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, например, вы центрируете его, а затем снова центрируете, в математике вы занимаете 50% страницы, из оставшихся 50% вы получаете более 50% (всего 75%), иостальные, измените все на

 <div class="list">

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

Вы можете упростить свой css, используя display:table и установив высоту / ширину для родительского элемента.

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

ДЕМОНСТРАЦИЯ