React Link组件默认内边距问题：按钮文本无法垂直居中

以下是几个直接有效的解决方法，按优先级排序：

方法1：使用Flex布局强制居中 #

给Link组件添加flex布局属性，利用align-items: center和justify-content: center实现精准居中，彻底规避字体默认间距或行高的影响：

<Link
  className={`tracking-wide rounded-full font-bold md:text-lg text-2xl flex items-center justify-center ${className}`}
  to={target}
  onClick={toClick}
>
  {name}
</Link>

• 替换原有的text-center为flex items-center justify-center，既保证水平居中，又强制垂直居中。
• 即使后续调整字号或padding，居中效果也能保持稳定。

方法2：重置行高消除字体偏移 #

大字号（如text-2xl）的默认行高会导致文本上下偏移，直接将行高设为与字号一致：

<Link
  className={`tracking-wide rounded-full font-bold md:text-lg text-2xl text-center leading-[1] ${className}`}
  to={target}
  onClick={toClick}
>
  {name}
</Link>

• leading-[1]是Tailwind的行高类，等价于line-height: 1，会让文本的行高完全匹配字号，消除底部多余间距。
• 如果需要微调，也可以用leading-tight（更紧凑）或自定义数值如leading-[24px]（对应text-2xl的24px字号）。

方法3：调整元素显示类型 #

默认<a>标签是inline元素，垂直对齐逻辑容易出问题，改为inline-block后能更好控制盒模型：

<Link
  className={`tracking-wide rounded-full font-bold md:text-lg text-2xl text-center inline-block ${className}`}
  to={target}
  onClick={toClick}
>
  {name}
</Link>

• 配合py-0使用时，inline-block能让元素的高度完全由内容决定，避免inline元素的默认行间距干扰。

额外排查：清除全局默认样式 #

如果以上方法无效，检查是否有全局CSS对<a>标签设置了默认padding/margin/line-height，可在全局样式中重置：

a {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

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