Wie zentriert man Gegenstände im Ionengitter?

Ich versuche zu zentrieren (beide horizontal und vertikal) und stapeln die 2 sozialen Tasten, aber es funktioniert nicht. Was mache ich falsch?Wie zentriert man Gegenstände im Ionengitter?

<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>

Quelle

2017-04-04 smaira

Ich bin nicht bewusst alle ionischen in Klassen gebaut, aber Sie können Flexbox für diesen Fall und Android- und iOS verwenden hat eine gute Unterstützung davon. Ich habe Ihren Code ein wenig geändert und vereinfacht.

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>

Quelle

2017-04-12 09:19:16 k185

Danke, das hat funktioniert, aber ich bin noch auf der Suche nach einer ionischen Art und Weise, dies zu tun – smaira

Wie zentriert man Gegenstände im Ionengitter?

Antwort

Verwandte Themen