离子项目中的“离子框架中心"按钮 [英] Ionic Framework Center button within ionic item

问题描述

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

 < 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

这篇关于离子项目中的“离子框架中心"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！