ionic 2 Android 标题和按钮在导航栏中未对齐答案

【问题标题】：ionic 2 Android title and buttons are not aligned in nav barionic 2 Android 标题和按钮在导航栏中未对齐
【发布时间】：2018-02-19 04:34:59
【问题描述】：

我正在使用 ionic v2。我在 android 的导航栏中有问题。请看这张图片： https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharing

左右的标题和按钮没有垂直对齐。左侧在顶部，标题在底部，左侧按钮在中间。

在 iOS 和网络浏览器中，一切都完美对齐。这是图片：

https://drive.google.com/file/d/0B7NIjYwi6WIpcERhd1dPa3FVaDA/view?usp=sharing

这是我在 ionic v2 中的 html：

<ion-header>
    <ion-navbar color="nav_bar" class="nav_bar_style">

    <ion-buttons start>
        <button ion-button clear color="nav_bar_bttn (click)="searchBttnPressed()">
        <ion-icon ios="ios-search" md="md-search"></ion-icon>
        </button>
    </ion-buttons>

    <ion-title text-center>Main</ion-title>

    <ion-buttons end>
        <button ion-button clear color="nav_bar_bttn" (click)="sortBttnPressed()">
            <ion-icon>Sort</ion-icon>
        </button>
        <button ion-button clear color="nav_bar_bttn" (click)="addBttnPressed()">
            <ion-icon name="md-add"></ion-icon>
        </button>
    </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        {{item.noteId}}
            <div class="item-note" item-right>
                {{item.content}}
            </div>
    </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>
</ion-content>

【问题讨论】：

你是怎么解决这个问题的？

标签： android ionic-framework navbar

【解决方案1】：

我找到了一个非常老套的方法来解决这个问题，但是嘿，它有效。

只需将其放入 .scss 文件中即可：

.toolbar-title-md {
    text-align: left;
    margin-right: 50px;
    margin-bottom: -30px;
}

Toolbar-title-md 是确切的文本项。当在其上放置边距时，它似乎会按照您的预期正常排列。当以另一种方式翻转时，它的位置与推送导航项完全相同（而不是模式）。

我建议找到一种方法将文本剪掉适量，这样您就可以避免标题的开头被剪掉而不是结尾。

【讨论】：