在離子視圖內容中的垂直對齊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

回答

相關問題