Chromium内核浏览器中使用text-align:center时如何避免文字轻微偏移

问题触发场景 #

用纯HTML和CSS写页面的时候，碰到相邻元素依次排布的场景：如果右侧元素设成inline-block行内块、给固定宽度，再加text-align: center做文字居中，就会出现文字轻微偏移的毛病。
这个毛病不是一直出现，只有当左边相邻元素的宽度落在某个特定区间时才会触发。试着改左边元素的内容、增减字符调整它的整体宽度，只要宽度跳出这个区间，偏移就消失了。这种偏移幅度极小，肉眼很难第一时间发现，但会实打实影响页面最终的呈现精度。

跨环境复现验证 #

跑了几轮不同环境的测试，能确定这是Chromium内核特有的渲染逻辑问题：

• 能复现的场景：Chrome浏览器、基于Chromium内核的新版Edge、用Chromium做内核的Electron渲染进程
• 没法复现的场景：Firefox全版本，测下来没见过偏移的情况
  翻了一圈公开能查到的资料，暂时没找到针对这个问题的官方说明。之前试过把出问题的右侧元素外面套一层div、把所有样式都移到外层容器上的方案，偏移还是存在，没解决问题。

问题复现代码 #

复现用的CSS代码：

body {
  font-family: Sans-serif;
}

#l {
  vertical-align: middle;
}

#r {
  margin-left: 6px;
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 2px;
  background-color: black;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

配套的HTML结构：

<span id="l">iiiiiiii</span><span id="r">i</span>

可落地的规避方案 #

针对这类Chromium独有的亚像素渲染偏移问题，下面是实测下来能稳定生效的解决办法：

• 换居中实现逻辑，绕开文本流自动计算
  别依赖元素本身的text-align: center做文字居中，给出问题的inline-block元素加相对定位当上下文，用伪元素承接到内部文字，通过绝对定位加transform实现居中，直接跳开行内文本排版阶段的亚像素计算逻辑：

  #r {
    position: relative;
  }
  #r::after {
    content: attr(data-text);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  

  对应调整HTML结构，把本来要显示的文字存在元素的data-text属性里，标签内部不用放实际文本。
• 强制文本按整数像素步长渲染
  给出问题的元素加上text-rendering: optimizeLegibility属性，部分版本的Chromium开了这个属性之后，会跳过半像素的文本位置计算，能消掉大部分场景下的随机偏移。
• 换排版上下文，避开行内块相邻排版
  把本来相邻的两个行内元素放到同一个Flex容器里，用Flex容器的对齐能力完成元素排布，替代原本行内排版的自动对齐逻辑，从根上绕开行内排版下的亚像素计算分支：

  .item-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  

  这个方案兼容性最好，不会对其他浏览器的渲染效果造成额外影响。

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