时间戳

首页 > 解决方案 > 如何在文本旁边正确添加按钮或图标？

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

问题描述

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

page.html

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

页面.scss

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

在此处输入图像描述

标签： htmlcssionic-frameworksassionic4

解决方案

一般来说，垂直对齐按钮（和其他内联块元素）与文本可以通过设置vertical-align:middle按钮来完成。我为在自由流动的文本元素内的文本旁边显示的徽章执行此操作。

ion-button {
  vertical-align: middle;
}

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

但是，在您的具体情况下，我无法说出您h6的实际使用情况。ion-toolbar（可能不是语义上的。）有时，使用 Ionic 包装元素之一的插槽（如 an或 an ）更好地使按钮或徽章垂直对齐ion-item。

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

推荐阅读