如何將物品置於離子電網內部？

我想中心（水平和垂直）和堆疊2個社交按鈕，但它不工作。我究竟做錯了什麼？如何將物品置於離子電網內部？

<ion-content padding> 
    <ion-grid> 
    <ion-row justify-content-center align-items-center> 
     <ion-col> 
     <button ion-button icon-left outline color="fb" (click)="fbClicked($event)"> 
    <ion-icon name="logo-facebook" color="#3B5998"></ion-icon> 
    CONNECT WITH FACEBOOK 
</button> 
     </ion-col> 
    </ion-row> 
    <ion-row justify-content-center align-items-center> 
     <ion-col> 
     <button ion-button icon-left outline> 
    <ion-icon name="logo-google"></ion-icon> 
    CONNECT WITH GOOGLE 
</button> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-content>

來源

2017-04-04 smaira

我並不完全瞭解所有的離子內置類的，但你可以使用Flexbox的這種情況與Android和iOS有着很好的支持它。我改了一下你的代碼並簡化了它。

angular.module('ionicApp', ['ionic']) 
 

 
.controller('AppCtrl', function($scope, $ionicModal) { 
 
    
 

 
});

.Aligner { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<html ng-app="ionicApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    
 
    <title>Ionic</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    </head> 
 
    <body ng-controller="AppCtrl"> 
 
    
 
    <ion-header-bar class="bar-positive"> 
 
     <h1 class="title">Social Buttons</h1> 
 
    </ion-header-bar> 
 
    
 
    
 
<ion-content class="Aligner"> 
 
    <ion-grid> 
 
    <ion-row> 
 
     <div class = "col"> 
 
     <button color="fb" (click)="fbClicked($event)"> 
 
    <ion-icon name="logo-facebook" color="#3B5998"></ion-icon> 
 
    CONNECT WITH FACEBOOK 
 
</button> 
 
     </div> 
 

 
     <div class = "col"> 
 
     <button> 
 
    <ion-icon name="logo-google"></ion-icon> 
 
    CONNECT WITH GOOGLE 
 
</button> 
 
     </div> 
 
    </ion-row> 
 
    </ion-grid> 
 
</ion-content> 
 
    
 

 
    
 
    </body> 
 
</html>

來源

2017-04-12 09:19:16 k185

謝謝，這工作，但我仍然在尋找一個離子的方式來做到這一點 – smaira

如何將物品置於離子電網內部？

回答

相關問題