span标签内特殊字符垂直对齐失效，如何实现垂直居中？

你遇到的星号等特殊字符无法垂直居中的问题，本质是两个原因导致的：

1. 你的li元素设置了inline-block，默认对齐规则是基于文本基线对齐，不同高度的内容会导致列表项本身就出现错位。
2. 不同字符的字体排版度量不同，星号这类特殊字符的视觉重心和默认的物理中线不重合，即便flex设置了align-items: center也会出现视觉上的偏移。

修复方案 #

修改对应的CSS规则即可，以下是完整的可运行代码：

CSS代码 #

.operators {
  margin: 0;
  padding: 0;
  list-style: none;
}
.operators > li {
  display: inline-block;
  /* 新增：保证所有列表项自身垂直对齐 */
  vertical-align: middle;
  /* 可选：添加列表项间距，避免元素挨在一起 */
  margin: 0 3px;
}
.operators > li span{
  font-size: 18px;
  /* 新增：使用等宽字体统一不同字符的排版度量 */
  font-family: Consolas, monospace, sans-serif;
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #cdcdcd;
  border: 1px solid #333333;
  /* 可选：如果还有细微视觉偏移，固定高度保证所有元素高度一致 */
  min-height: 28px;
  min-width: 20px;
}
/* 可选：针对星号做单独微调，仅当上面的通用方案还有偏移时使用 */
.operators > li span:has(*) {
  transform: translateY(1px);
}

HTML代码 #

<ul class="operators">
  <li>
    <span>+</span>
  </li>
  <li>
    <span>-</span>
  </li>
  <li>
    <span>*</span>
  </li>
  <li>
    <span>=</span>
  </li>
  <li>
    <span>2</span>
  </li>
</ul>

额外说明 #

如果不想用flex布局，也可以换成inline-block+固定行高的方案，把span的样式替换为以下内容即可：

.operators > li span{
  font-size: 18px;
  font-family: Consolas, monospace, sans-serif;
  display: inline-block;
  padding: 0 8px;
  /* 行高和高度保持一致实现垂直居中 */
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #ffffff;
  background-color: #cdcdcd;
  border: 1px solid #333333;
}

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