Как правильно добавить кнопки или значки рядом с текстом?

Question

Я хочу разместить кнопку рядом с текстом, таким как ion-label.Но когда я это делаю, кнопка находится прямо рядом с текстом, в то же время как-то смещенная и неправильно выровненная по тексту в строке.Что я могу изменить, чтобы он выглядел красивее?

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;
}

Answer 1

Как правило, выравнивание по вертикали кнопок (и других элементов встроенного блока) с текстом можно выполнить, установив vertical-align:middle на кнопке. Я делаю это для значков, которые отображаются рядом с текстом внутри свободно текущих текстовых элементов.

ion-button {
  vertical-align: middle;
}

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

В вашем конкретном случае, однако, я не могу сказать, как на самом деле используется ваш h6. (Вероятно, не семантически.) Иногда получение кнопок или значков для выравнивания по вертикали лучше выполнить с помощью слотов одного из элементов обертывания Ionic, например ion-toolbar или ion-item.

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

Answer 2

Попробуйте ионный значок для этого (https://ionicframework.com/docs/api/badge)

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