如何将h2标签内的文本水平居中？含硬编码与变量内容

1. 实现文本水平居中 #

现有CSS里的margin-left: -50px会强制偏移标题位置，先移除这个属性，再给.title添加text-align: center即可让整个h2文本水平居中：

.title {
  color: crimson;
  padding: 20px 0;
  text-align: center; /* 新增：实现水平居中 */
  /* 删除 margin-left: -50px; */
}

2. 修复<>与变量的对齐偏差 #

<>位置偏高是因为普通符号和变量文本的基线不一致，可通过以下两种方式修复：

• 方案一：CSS统一对齐
  给.title设置合适的行高，或者直接指定行内元素垂直对齐方式：

.title {
  color: crimson;
  padding: 20px 0;
  text-align: center;
  line-height: 1.2; /* 调整行高，让行内元素基线对齐 */
  /* 或者添加 vertical-align: middle; */
}

• 方案二：优化JSX结构（可选）
  把<>单独用<span>包裹，通过CSS精准控制对齐：

<h2 className={styles.title}>
  <span>&lt;</span>{title}<span>&gt;</span>
</h2>

对应的CSS：

.title span {
  vertical-align: middle;
}

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