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

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

通常，可以通过在按钮上设置vertical-align:middle来实现带有文本的垂直对齐按钮（和其他行内块元素）。我这样做是为了让徽章显示在自由流动的文字元素中文字旁边。

ion-button {
  vertical-align: middle;
}

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

但是，在您的特定情况下，我无法确定您的h6的使用情况。 （可能不是语义上的。）有时，通过使用离子包装元素之一（例如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>