html - 使用文本中心属性在 ionic 元素中对齐按钮不起作用

Question

在我使用 CSS 修改按钮后，使用 text-center 属性在 ion-item 中对齐按钮不起作用。以下代码工作正常。按钮居中对齐。

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

但是我用CSS修改按钮之后。按钮不再居中对齐。这是代码:

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

</ion-list>

CSS 代码:

homeBtn { display:block; height: 50px; 
              width: 300px; 
              /* border-radius: 50%; */
              border: 1px ; 
              background-color: white; 
         color: black; }

Answer 1

我通过修改 CSS 找到了解决方案。我不确定为什么我必须这样做。因为我的 ion-item 标签中已经有特殊的文本中心。这是我的工作 CSS。 :

.homeBtn {
 /* display:block; */
 height: 50px;
 width: 300px;
 /* border-radius: 50%; */
 border: 1px ;
 /* display: flex; */
 /* justify-content: center; */
 background-color: white;
 color: black;
 text-align: center;
}