CODEWITHSUNDEEP
htmlcssionic-frameworksassionic4
Colin Ragnarök
Colin Ragnarök

Reputation: 1062

How to add buttons or icons properly next to a text?

I want to place a button right next to a text like ion-label. But when I do so, the button is right next to the text while somehow shifted and not properly aligned to the text in a line. What can I change so it looks prettier?

page.html

<h6>text•&nbsp;text•&nbsp;<ion-button shape="round"></ion-button></h6>

page.scss

 h6{
  color: white;
  font-weight: bold;
  text-align: center !important;
  font-size: 12.5px;
}

enter image description here

Upvotes: 0

Views: 1031

Answers (2)

bts
bts

Reputation: 709

In general, vertically-aligning buttons (and other inline-block elements) with text can be done by setting vertical-align:middle on the button. I do this for badges that I display next to text inside of free-flowing text elements.

ion-button {
  vertical-align: middle;
}

<h6>
  text•&nbsp;text•&nbsp;
  <ion-button shape="round"></ion-button>
</h6>

In your specific case, though, I can't tell how your h6 is really being used. (Probably not semantically.) Sometimes, getting buttons or badges to vertically-align is better done by using the slots of one of the Ionic wrapping elements, like an ion-toolbar or an ion-item.

<ion-item>
  <ion-label>text• text•</ion-label>
  <ion-button shape="round" slot="end"></ion-button>
</ion-item>

Upvotes: 1

Velusamy Venkatraman
Velusamy Venkatraman

Reputation: 736

Try ion-badge for this(https://ionicframework.com/docs/api/badge)

<ion-button>Button name<ion-badge color="primary" slot="end">11</ion-badge></in-button>

Upvotes: 0

Related Questions