如何在文本旁边正确添加按钮或图标？

Question

我想在离子标签等文本旁边放置一个按钮。但是当我这样做时，按钮就在文本旁边，但不知何故移动了并且没有与一行中的文本正确对齐。我可以改变什么让它看起来更漂亮？

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

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

Answer 2

一般来说，vertically-aligning 个带有文本的按钮（和其他 inline-block 个元素）可以通过在按钮上设置 vertical-align:middle 来完成。我为显示在 free-flowing 文本元素内的文本旁边的徽章执行此操作。

ion-button {
  vertical-align: middle;
}

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

不过，在您的具体情况下，我无法判断您的 h6 是如何被使用的。（可能不是语义上的。）有时，将按钮或徽章设置为 vertically-align 最好通过使用 Ionic 包装元素之一的插槽来完成，例如 ion-toolbar 或 ion-item。

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

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