如何让ion-text在两个按钮间垂直居中？（Ionic 8）

问题出在Ionic的ion-button自带默认的内边距、最小高度和行高，导致它和同级的ion-text在flex布局下视觉中心不一致，单纯给ion-toolbar加align-items: center无法抵消按钮默认样式的影响。

可以通过以下两种方式实现精准居中：

方法1：统一子元素的行高与高度 #

通过统一按钮和文本的行高、高度，确保视觉中心完全对齐：

ion-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 用gap控制按钮与文本的间距，比padding更灵活 */
}

/* 重置按钮默认样式，统一高度与行高 */
ion-button {
  --min-height: 36px;
  --padding-start: 12px;
  --padding-end: 12px;
  line-height: 36px;
}

ion-text {
  font-size: 1.5rem;
  line-height: 36px; /* 行高与按钮保持一致 */
}

方法2：利用flex布局强制对齐并继承行高 #

如果不需要修改按钮的默认尺寸，直接让文本继承父元素行高，同时确保flex布局的对齐规则生效：

ion-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-text {
  font-size: 1.5rem;
  margin: 0 8px; /* 控制文本与按钮的左右间距 */
  line-height: inherit; /* 继承toolbar的行高，和按钮对齐 */
}

原理说明：align-items: center是让子元素的容器中心对齐，但按钮内部的文字和图标本身有行高/内边距，会让按钮的视觉中心偏移。统一行高或者让文本继承行高，可以让两者的视觉中心完全重合，实现精准垂直居中。

内容的提问来源于stack exchange，提问作者Pablo