Question

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

ID  Name
3   A
4   B
4   C

Answer 1

当前答案（离子4）要求除使用文本居中之外，还应将按钮包装在标签中。这可以正常工作：

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

Answer 2

您可以使用ionic的<form id="process_form" method="POST" enctype="multipart/form-data" autocomplete="off" role="form" data-parsley-focus="none"> CSS实用程序。参见https://ionicframework.com/docs/theming/css-utilities/

用法示例：

text-center

如果您不希望整个项目的内容居中，则可以使用CSS将按钮居中。

例如在<ion-item text-center> <button ion-button>click me</button> </ion-item>

内用 text-center 包装器div包装按钮

Answer 3

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

Read - Ionic CSS Utilities

您可以使用text-center

内联内容在行框内居中。

尝试这样”

<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

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

3 个答案: