Align a button within ion-item using text-center attribute doesn't work

0
votes

Align a button within ion-item using text-center attribute doesn't work after I modify the button with CSS. The following code work fine. The buttons were centrally aligned. 

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

But after I use CSS to modify the button. The buttons were no longer centrally aligned. Here is the code :

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

homeBtn { display:block; height: 50px; 
              width: 300px; 
              /* border-radius: 50%; */
              border: 1px ; 
              background-color: white; 
         color: black; }
1
htmlcsscionic-framework
Why don't you try to align with text-align: center with CSS? – Pablo Darde
I try add text-align: center into the homeBtn CSS. It doesn't work. Then I try to add a div wrap around the button, it too doesn't work. – CK8
do you mean you want them centered on the page? – Carol McKay
Could you please create a StackBlitz demo with the issue? Thanks :) – sebaferreras
button aligned center of the page horizontally. – CK8

1 Answers

0
votes

I found a solution by modifying the CSS. I am not sure why I have to do that. Because I already special text-center in my ion-item tag. Here is my working css is. :

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