이온 그리드 내부에 항목을 집중시키는 방법은 무엇입니까?

나는 중심에 놓으 려하고 (Horiz와 수직 모두) 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

나는 수업에 내장 된 모든 이온을 충분히 인식하지 오전하지만이 경우와 안드로이드 및 iOS 용 인 flexbox를 사용할 수있는 그것의 좋은 지원을하고있다. 나는 당신의 코드를 약간 바꾸고 그것을 단순화했다.

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

이온 그리드 내부에 항목을 집중시키는 방법은 무엇입니까?

답변

관련 문제