[英]How to center horizontally an element in ionic
我想在离子中水平居中一个元素,左右两边的边距相同
<div class="tabs-group" class="ion-justify-content-center"> <ion-row> <ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]]? 'primary-button': 'secondary-button'"> <ion-grid> <ion-row> </ion-row> <ion-row> <ion-col> <b>{{tabsName[j]}} </b> </ion-col> </ion-row> </ion-grid> </ion-col> </ion-row> </div>
ion-justify-content-center ionic CSS class 未应用居中,这是 output:
您必须在 flexbox 节点上使用ion-justify-content-center
。 因此,要么将display: flex
放在包装器 div 节点上,要么像这样在<ion-row>
上使用ion-justify-content-center
。
<ion-row class="ion-justify-content-center">
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>
https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.