CODEWITHSUNDEEP
htmlionic-frameworkionic2ionic3
Asia x3
Asia x3

Reputation: 616

Ionic - Can't center align ion-search bar in header

I'm having a lot of trouble centering a ion-searchbar in my navigation bar. I've tried text-align and ion-grids, but nothing seems to work. I has to be the component.

Ionic 2/3 Mobile

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

Upvotes: 1

Views: 2662

Answers (1)

itodd
itodd

Reputation: 2373

Try this

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

Upvotes: 1

Related Questions