Ionic - Ionen-Suchleiste in der Kopfzeile kann nicht zentriert werden

Question

Ich habe eine Menge Probleme beim Zentrieren einer Ionen-Suchleiste in meiner Navigationsleiste. Ich habe Text-Align und Ion-Grids ausprobiert, aber nichts scheint zu funktionieren. Ich muss die Komponente sein.

index.html

<ion-header> 
<ion-navbar> 
    <ion-toolbar> 
     <button class="home-menu" ion-button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-toolbar> 
    <ion-title> 
     <h1>Title Here</h1> 
    </ion-title> 
    <ion-searchbar class="search" [showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)"> 
    </ion-searchbar> 
</ion-navbar> 

index.scss

page-index { 
    ion-searchbar { 
     width: 60 % ; 
     text-align: center !important; 
    } 
} 

Answer 1

Versuchen Sie, diese

page-index { 
    ion-searchbar { 
     width: 60%; 
     margin: 0 auto; 
    } 
}