离子徽章的垂直对齐

Posted 2021-04-17

我在我的Ionic 3应用程序中有这个ion-item。它包括ion-badge和ion-button。我希望它们都在ion-item内垂直对齐。我在here尝试了答案，但它没有用。最后，我需要将这些ion-badge和ion-button并排。

<ion-item>
  <ion-badge>150</ion-badge>
  <button ion-button>My Button</button>
</ion-item>

答案

在ion-item中添加一个类。

html：

<ion-item class="my-item">
  <ion-badge>150</ion-badge>
  <button ion-button>My Button</button>
</ion-item>

并将以下CSS样式添加到ion-label的ion-item子项中。

SCSS：

.my-item {
    ion-label {
        display: flex;
        flex-direction: row;
        align-items: baseline
    }
}

结果：

更新：

将图标添加到按钮的代码和结果：

HTML：

<ion-item class="my-item">
    <ion-badge>150</ion-badge>
    <button ion-button icon-end>My Button
        <ion-icon name="arrow-down"></ion-icon>
    </button>
</ion-item>

SCSS：

.my-item {
    ion-label {
        display: flex;
        flex-direction: row;
        align-items: baseline
    }

    ion-icon {
        margin-left: 5px;
    }
}

另外，我为<ion-icon>添加了一个CSS规则，以便在文本和按钮中的图标之间获得som空间。

结果：

另一答案

辩解内容：中心;会工作!!

ion-badge {justify-content: center; }