垂直中心登錄表單？

我正在使用AngularJS和Ionic構建混合移動應用程序。垂直中心登錄表單？

這是我的登錄表單：

<ion-content class="padding"> 
    <form class="list"> 
     <label class="item item-input"> 
     <input type="text" class="text-align-center" placeholder="{{ 'EMAIL' | translate }}" ng-model="credentials.email" autocapitalize="off" autocorrect="off" spellcheck="false"> 
     </label> 
     <label class="item item-input"> 
     <input type="password" class="text-align-center" placeholder="{{ 'PASSWORD' | translate }}" ng-model="credentials.password" autocapitalize="off" autocorrect="off"> 
     </label> 
     <button class="button button-block button-stable" type="submit" ng-click="login()">{{ 'LOGIN' | translate }}</button> 
    </form> 
    </ion-content>

是什麼讓這個登錄表單垂直排列的好辦法？

來源

2015-11-20 user1283776

參見[如何垂直居中的一個div所有瀏覽器？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-a ll-browsers） –

@ iWork：這是行不通的。它不會改變我的表格的出現。表格仍然在頁面頂部 – user1283776

你能提供一個小提琴嗎？ –

對於HTML

<div class="outer"> 
<div class="middle"> 
<div class="inner"> 
<ion-content class="padding"> 
    <form class="list"> 
     <label class="item item-input"> 
     <input type="text" class="text-align-center" placeholder="{{ 'EMAIL' | translate }}" ng-model="credentials.email" autocapitalize="off" autocorrect="off" spellcheck="false"> 
     </label> 
     <label class="item item-input"> 
     <input type="password" class="text-align-center" placeholder="{{ 'PASSWORD' | translate }}" ng-model="credentials.password" autocapitalize="off" autocorrect="off"> 
     </label> 
     <button class="button button-block button-stable" type="submit" ng-click="login()">{{ 'LOGIN' | translate }}</button> 
    </form> 
    </ion-content> 
</div> 
</div> 
</div>

樣式CSS

<style> 
.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    width: /*whatever width you want*/; 
} 
</style>

可能幫助你

來源

2015-11-20 07:58:24

謝謝你的嘗試。這並不影響我登錄表單的出現。這些更改後，登錄表單仍然位於頁面頂部。 – user1283776

我想提出幾個解決方案的CSS，我發現，但許多沒有工作。我認爲這可能與Ionics css有關。

該解決方案是專門爲離子工作FO我：

http://play.ionic.io/app/6f5cda89e7fd

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding loginForm"> 
     <div class="loginForm-wrapper"> 
      <label class="item item-input item-input-rounded"> 
      <input type="text" placeholder="First Name"> 
      </label> 
      <label class="item item-input item-input-rounded"> 
      <input type="password" placeholder="Password"> 
      </label> 
     </div> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

CSS：

.loginForm .scroll { 
    height: 100%; 
} 
    .loginForm .loginForm-wrapper { 
    position: absolute; 
    top: 40%; 
    left: 0; 
    right: 0; 
    }

來源

2015-11-20 08:42:54 user1283776

垂直中心登錄表單？

回答

相關問題