CSS实现文字沿圆形环绕时transform变换后字符对齐异常问题求解

开发者阿泽

2026-10-3

问题原因

字符偏移是因为每个字符容器没有统一的对齐规则，不同字形的宽高差异在旋转后被放大，导致位置错位：

没有给字符span设置固定宽度，字符本身的宽度差异会导致水平方向偏移
没有统一垂直对齐规则，不同字形（比如i和f）的高度差异会导致垂直方向错位

调整方案

仅需要修改.circle span对应的CSS规则即可，调整后完整代码如下：

.circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle span {
    transform: rotate(var(--degrees));
    position: absolute;
    height: 85px;
    width: 20px; /* 固定每个字符容器宽度 */
    text-align: center; /* 字符在容器内水平居中 */
    line-height: 18px; /* 固定字符垂直对齐位置 */
    top: 0; /* 容器顶部统一对齐 */
    color: #000;
    text-transform: uppercase;
    left: calc(50% - 10px); /* 减去宽度的一半，确保容器水平居中 */
    transform-origin: 50% 100%;
    font-weight: 900;
    font-family: Arial;
  /*  animation: rotate 20s linear infinite; */
}

.circle span.highlight {
    color: #439709;
}

@keyframes rotate {
  from { transform: rotate(var(--degrees))  }
  to { transform: rotate(calc(var(--degrees) + 359deg)) }
}