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.

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

1 post - 1 participant

Read full topic