如何解决HTML同一行Unicode文本左右对齐时的垂直错位问题？

你遇到的问题是全角Unicode字符（比如示例里的全角问号）和半角文本的基线不一致，导致用常规float或flex布局时出现垂直错位。全角字符的排版基线通常比半角文本更高，直接布局就会出现上下不对齐的情况。

解决方案 #

通过统一垂直对齐规则或行高，就能让两类文本在同一行对齐：

方法1：给文本元素设置垂直对齐属性

针对float布局，给两个span添加vertical-align: baseline（或middle）：

<div style="width: 70px;">
  <span style="float: left; vertical-align: baseline;">foo</span>
  <span style="float: right; vertical-align: baseline;">foo？</span>
</div>

方法2：在flex布局中设置对齐方式

flex布局下，给容器添加align-items: baseline，让子元素基于基线对齐：

<div style="width: 70px; display: flex; justify-content: space-between; align-items: baseline;">
  <span>foo</span>
  <span>foo？</span>
</div>

方法3：统一行高兜底

如果上述方法仍有细微错位，可以给容器设置固定line-height，同时配合垂直对齐：

<div style="width: 70px; line-height: 1.4;">
  <span style="float: left; vertical-align: middle;">foo</span>
  <span style="float: right; vertical-align: middle;">foo？</span>
</div>

原理说明 #

全角字符的默认排版会占据更大的垂直空间，vertical-align: baseline可以强制所有文本对齐到同一基线；flex布局的align-items: baseline会让子元素自动匹配基线位置。若基线对齐效果不理想，vertical-align: middle或固定line-height能让文本垂直居中，彻底解决错位问题。

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