如何在文本（如ion-label）旁正确添加按钮并实现对齐？

这个问题在Ionic里挺常见的，主要是因为ion-button组件自带默认的内边距、行高和垂直对齐规则，和普通文本放在同一行时容易出现偏移。我给你两种可行的解决方案：

方案一：调整按钮的垂直对齐与尺寸 #

通过给按钮添加自定义样式，强制它和文本垂直居中对齐，同时适配文本的字号大小：

修改后的page.html #

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

修改后的page.scss #

h6{
  color: white;
  font-weight: bold;
  text-align: center !important;
  font-size: 12.5px;
  
  .aligned-btn {
    // 核心：让按钮与文本垂直居中对齐
    vertical-align: middle;
    // 自定义按钮尺寸，适配12.5px的文本
    --height: 18px;
    --padding-start: 6px;
    --padding-end: 6px;
    // 如果按钮内有文字，同步调整字号
    font-size: 10px;
  }
}

方案二：用Flex布局统一控制对齐 #

把h6设置为Flex容器，利用Flex的特性让内部元素自动垂直居中，这种方式更灵活，也方便控制元素间距：

修改后的page.scss #

h6{
  color: white;
  font-weight: bold;
  font-size: 12.5px;
  // 启用Flex布局
  display: flex;
  // 垂直方向居中对齐
  align-items: center;
  // 水平方向保持居中（替代原来的text-align）
  justify-content: center;
  
  ion-button {
    --height: 18px;
    --padding-start: 6px;
    --padding-end: 6px;
    // 给按钮和文本之间加一点间距，视觉更舒服
    margin-left: 4px;
  }
}

两种方案都能解决偏移问题，方案二更推荐，因为Flex布局在响应式场景下表现更稳定。如果按钮里没有文字，只需要调整高度和对齐相关的样式就可以了。

内容的提问来源于stack exchange，提问作者Colin Ragnarök