離子徽章的垂直對齊

Question

我在我的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> 

Answer 1

將課程添加到您的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 
    } 
} 

結果：

UPDATE：

代碼和與圖標導致添加到按鈕：

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

此外，我增加了一個CSS規則爲<ion-icon>來獲取文本並在該按鈕的圖標之間索姆空間。

結果：

Answer 2

證明內容：中心;將工作！

ion-badge {justify-content: center; }