Vertical Center Ion-Text And Ion-Button Inside Ion-Badge

I’m struggling to vertically center ion-text and ion-button inside of a ion-badge, here’s the code.

<ion-badge class="" :key="tag" v-for="(tag, index) in tags">
  <ion-text class="font-10">{{tag}}</ion-text>
  <ion-button size="small" fill="clear" class="ion-no-padding ion-no-margin" @click="removeTag(index)">
    <ion-icon :icon="close"></ion-icon>
  </ion-button>
</ion-badge>

Here’s the current styling.

ion-badge {
  ion-text {
    margin-left: 3px;
    margin-right: 3px;
  }
  ion-button {
    height: 20px;
  }
}

And this is what it currently looks like.

badges

I tried vertical-align, padding-top and margin-top but it doesn’t help. Any ideas?

As a workaround, I ended up using two ion-button instead since I couldn’t get ion-text to vertically center.

<ion-badge class="" :key="tag" v-for="(tag, index) in tags">
  <ion-button disabled="true" size="small" fill="clear" class="ion-no-padding ion-no-margin text-lowercase">{{tag}}</ion-button>
  <ion-button size="small" fill="clear" class="ion-no-padding ion-no-margin" @click="removeTag(index)">
    <ion-icon :icon="close"></ion-icon>
  </ion-button>
</ion-badge>

Hopefully this helps someone else having the same problem.

It might be better to use the ion-chip component instead: ion-chip: Ionic Framework API Docs