イオンビューの内容の垂直方向の整列div

イオンビュー内でdivを垂直に整列しようとしています。私はthis codepenを参照しています。このcodepenのサンプルは、ヘッダーのないイオンビューで動作します。ただし、私は次のようにヘッダーを含める場合、垂直方向に正しく配置されません。イオンビューの内容の垂直方向の整列div

このような場合に垂直方向に整列させるにはどうすればよいですか？

<body ng-controller="AppCtrl as ctrl"> 
    <ion-header-bar align-title="left" class="bar-positive"> 
    <div class="buttons"> 
    <button class="button" ng-click="doSomething()">Left Button</button> 
    </div> 
    <h1 class="title">Title!</h1> 
    <div class="buttons"> 
    <button class="button">Right Button</button> 
    </div> 
</ion-header-bar> 
    <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> 

    </body>

出典

2016-05-28 vincentsty

ヘッダーを追加しても違いはありません。あなたはあなたの問題を詳しく教えていただけますか？ – Atula

.center1{ 
    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; 
}

あなたのCSSに以下のクラスを追加します。

出典

2016-05-28 11:32:16

イオンビューの内容の垂直方向の整列div

答えて

関連する問題