Vertikale Ausrichtung für Ion-Badge

Question

Ich habe diese ion-item in meiner Ionic 3-Anwendung. Es enthält eine ion-badge und eine ion-button. Ich möchte, dass beide innerhalb der ion-item vertikal ausgerichtet sind. Ich habe versucht, die Antworten in here, aber es hat nicht funktioniert. Am Ende muss ich diese und ion-button Seite an Seite haben.

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

Answer 1

eine Klasse zu Ihrem ion-item hinzufügen.

HTML:

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

und fügen Sie die folgenden CSS-Stile auf die ion-label Kind Ihres ion-item.

SCSS:

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

Ergebnis:

UPDATE:

-Code und führen mit Symbol der Schaltfläche hinzugefügt:

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

Auch habe ich eine CSS-Regel für die <ion-icon> som Raum zwischen dem Text und dem Symbol in der Schaltfläche zu erhalten.

Ergebnis:

Answer 2

rechtfertigen-Inhalt: center; wird Arbeit !!

ion-badge {justify-content: center; }