Ionic：如何实现列表项文本在左右图标间居中对齐

我明白你想让<ion-item>里的文本刚好卡在左右两个图标中间的需求，之前用text-align: center没达到预期是因为默认布局下，文本的容器并没有占据图标之间的全部空间——只是文本自己在小容器里居中，而非在两个图标之间居中。试试下面的方案，肯定能解决你的问题：

方法：利用Flex布局精确控制 #

核心思路是让左右图标分别贴住item的两侧，中间的文本容器占据剩下的所有空间，再让文本在这个容器里居中，这样就正好卡在两个图标中间了。

修改后的HTML代码：

<ion-list>
  <ion-item class="centered-item">
    <ion-icon slot="start" name="lock"></ion-icon>
    <div class="text-container"><b>Woman</b></div>
    <ion-icon slot="end" name="lock"></ion-icon>
  </ion-item>
</ion-list>

注：如果你的Ionic版本比较旧（比如用item-left/item-right而非slot="start"/slot="end"），把slot属性换成对应的类名即可，核心逻辑不变。

对应的CSS样式：

.centered-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让左右图标分别靠向item两侧 */
}

.text-container {
  flex: 1; /* 占据图标之间的全部剩余空间 */
  text-align: center; /* 让文本在容器内居中 */
}

这样调整后，<b>Woman</b>就会精准地位于两个lock图标中间，完全符合你想要的效果啦。

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