我想在离子视图中垂直对齐div。我指的是this codepen。此codepen中的示例适用于没有标题的离子视图。但是,如果我包含如下的标题,则它不能正确垂直对齐。
在这种情况下,如何使其垂直对齐?
<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>
答案 0 :(得分:0)
.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中。