Выровнять кнопку внутри элемента ion с помощью атрибута text-center не работает

Question

Выравнивание кнопки внутри ion-элемента с использованием атрибута text-center не работает после того, как я изменил кнопку с помощью CSS. Следующий код работает нормально. Кнопки были расположены по центру.

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