离子 - 不能将头部中的离子搜索条对齐

Question

我在导航栏中以离子搜索栏为中心时遇到了很多麻烦。 我尝试过文本对齐和离子网格，但似乎没有任何效果。我必须成为组件。

的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

试试这个

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