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

Ionic Framework Ionic Vue
1

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?

2

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.

3

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

4

I ended up styling the badge as a flex container, and then used the justify-content and align-items properties:

ion-badge {
  display: flex;
  align-items: center;
  justify-content: center;

  // other properties
}

In your particular case (if you still care after all this time! :smile:), I think you may have to add flex-direction: row and only use the align-items for the cross axis:

ion-badge {
  display: flex;
  flex-direction: row;
  align-items: center;

  // other properties
}

NOTE: I know it’s been awhile, but I’m bumping this for anyone else still trying to center content inside of a badge (this was the top answer on google for me).