離子按鈕對齊

Question

我想爲着陸頁設計一個離子模板，如下圖所示。

我的問題是我無法使這些按鈕在屏幕的底部。而且我想水平對齊它們。

Answer 1

把它們寫在footer-bar

<ion-footer-bar align-title="left" class="bar-assertive"> 
    <div class="buttons"> 
     <button class="button">Left Button</button> 
    </div> 
    <h1 class="title">Title!</h1> 
    <div class="buttons" ng-click="doSomething()"> 
     <button class="button">Right Button</button> 
    </div> 
    </ion-footer-bar> 

Answer 2

我希望能幫助你與我的回答如下：

<!--1. Only css--> 
    <div style="position: absolute; bottom: 0; text-align: center; z-index: 1000; width: 100%;"> 
    <div class="button-bar"> 
     <a class="button button-positive">Sign up</a> 
     <a class="button button-balanced">Log in</a> 
    </div> 
    </div> 

<!--2. Directive ion-footer-bar and class css button-bar--> 
    <ion-footer-bar> 
    <div class="button-bar"> 
     <a class="button button-positive">Sign up</a> 
     <a class="button button-balanced">Log in</a> 
    </div> 
    </ion-footer-bar> 

    <!--3. Directive ion-footer-bar and and without class button-bar--> 
    <ion-footer-bar> 
    <div style="text-align: center; width: 100%"> 
     <a class="button button-positive button-large">Sign up</a> 
     <a class="button button-balanced button-large">Log in</a> 
    </div> 
    </ion-footer-bar>