Search code examples
cssionic-framework

How to center ion-text?

I am trying to center ion-text vertically between two buttons. This is my attempt.

ion-toolbar {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-text {
  font-size: 1.5rem;
  padding-left: 2%;
  padding-right: 2%;
}

I've also tried vertical-align middle on ion-text, but it's not in the middle. How to bring it exactly to the middle?

enter image description here

I'm trying locally on latest (8) ionic version.

Solution

  • When using ion-button inside ion-toolbar its recommended to wrap those in ion-buttons components.

    Wrapping the buttons in the ion-buttons component will automatically handle the styling and will align the content properly.

    <ion-toolbar>
  <ion-buttons>
    <ion-button fill="solid" color="primary">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
    <ion-text color="primary">911</ion-text>
    <ion-button fill="solid" color="primary">
      <ion-icon slot="icon-only" name="remove"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>