离子项目中的“离子框架中心"按钮

本文介绍了离子项目中的“离子框架中心"按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用离子骨架.以下代码使按钮向左对齐.我想使按钮居中对齐.我怎样才能做到这一点 ?谢谢

< ion-list>< ion-item>按钮ion-button(click)="gotoPage1();">转到第1页</button></ion-item>< ion-item>按钮ion-button(click)="gotoPage2()">转到第2页</button></ion-item>< ion-item>按钮ion-button(click)="gotoPage3()">转到第3页</button></ion-item></ion-list>

解决方案

Ionic提供了一组实用程序属性，可以在任何元素上使用它们，以修改文本或调整填充或边距.

阅读-Ionic CSS实用程序 您可以使用文本中心

内联内容在行框内居中.

尝试这样'

< ion-list>< ion-item文本中心>< button ion-button(click)="gotoPage1();">转到第1页</button></ion-item>< ion-item文本中心><按钮ion-button(click)="gotoPage2()">转到第2页</button></ion-item>< ion-item文本中心><按钮ion-button(click)="gotoPage3()">转到第3页</button></ion-item></ion-list>

stackblitz-代码

I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks

<ion-list> <ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item> <ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item> <ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item> </ion-list>

解决方案

Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.

Read - Ionic CSS Utilities

you can use text-center

The inline contents are centered within the line box.

Try like this'

<ion-list > <ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item> <ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item> <ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item> </ion-list>

stackblitz - code