如何將物品置於離子網內？
[英]How to center items inside ion-grid?
問題描述
我試圖居中（水平和垂直）並堆疊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>
1 個解決方案
解決方案1
0 2017-04-12 09:19:16
我並不完全了解所有離子內置類，但你可以使用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>
將畫布大小調整為其父元素 ion-grid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.