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

【问题标题】：Ionic Framework Center button within ionic item离子项目中的离子框架中心按钮
【发布时间】：2018-10-31 21:46:26
【问题描述】：

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

<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-framework button

【解决方案1】：

您可以使用 ionic 的 text-center CSS 实用程序。见https://ionicframework.com/docs/theming/css-utilities/

示例用法：

<ion-item text-center>
  <button ion-button>click me</button>
</ion-item>

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

例如在ion-item

中使用 text-center 包装器 div 包装按钮

【讨论】：

嗨，文本中心不起作用。如果我使用 CSS 更改按钮以固定长度。 .homeBtn { 显示：块；高度：50px；宽度：300px； /* 边界半径：50%； */ 边框：1px ;背景颜色：白色；颜色：黑色; }

【解决方案2】：

当前答案（Ionic 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>

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

离子项目中的离子框架中心按钮我用了这个方法

<ion-grid>
       <ion-row>
         <ion-col size="12" class="ion-text-center">
          <ion-button>
            Login
          </ion-button>
         </ion-col>
       </ion-row>
   </ion-grid>

【讨论】：