text-align: center 对 无效，因其是行内元素；须作用于父容器（如 ）才能使图标+文字水平居中；垂直居中推荐用 display: flex 父容器配合 justify-content: center 和 align-items: center。
超链接里图标+文字怎么水平居中
直接给 <a></a> 加 text-align: center 没用——它只对块级父容器生效，而 <a></a> 默认是行内元素，自身不接受 text-align。真正起作用的是它的父容器。
常见错误现象：给 <a href="#"><svg></svg> 下载</a> 自己加 text-align: center，页面毫无反应；或者图标和文字上下错位、间距不均。
- 确保父容器（比如
<div> 或 <code><nav></nav>）设置了text-align: center -
<a></a>本身要保持默认display: inline，别乱加block或flex - 如果父容器用了
flex，那text-align就被绕过了，得改用justify-content: center - 图标用
<svg></svg>或<img alt="HTML怎么让超链接文字和图标同时居中" >，避免<i></i>字体图标因vertical-align基线问题飘高 - 不要给
<a></a>设display: flex——这不是链接该干的事 - 想垂直居中？统一用父容器 flex 布局：
.link-wrapper { display: flex; justify-content: center; align-items: center; height: 48px; } - 确保
<svg></svg>没设vertical-align，也别套<span></span>再包一层，否则align-items会失效 - 响应式字号变化时，
height和line-height不匹配会导致偏移，flex 方案天然规避这点 - 优先试
vertical-align: middle，比text-bottom或-.125em更通用 - 给
<svg></svg>显式设height: 1em; width: 1em;，让它随文字缩放 - 避免同时设
font-size和height，否则在 Safari 或旧版 Chrome 中可能计算冲突 - 如果用了 icon font（如
<i class="icon-download"></i>），确认它没被 Bootstrap 或其他框架的display: inline-block覆盖掉 - 必须加
align-items: center和gap: 8px（别用margin） - 文字部分建议包一层
<span></span>并设white-space: nowrap，防换行撕裂图标对齐 - 为兼容 IE11，加
-ms-flex-align: center前缀（虽然 2026 年多数项目已可省略） - 别在
<a></a>上同时写text-align和display: flex，后者会完全接管布局逻辑
为什么 align-items: center 在 <a></a> 上没效果
因为 <a></a> 默认不是 flex 容器，align-items 根本不生效。强行加 display: flex 到 <a></a> 上，又会破坏其作为行内链接的语义和默认行为（比如下划线断开、点击热区变窄）。
更关键的是：align-items 只对直接子元素起作用。如果 <a></a> 里嵌了 <span></span> 或 <strong></strong>，而图标在另一个标签里，中间多了一层，视觉上就可能错位。
立即学习“前端免费学习笔记（深入）”；
<svg></svg> 图标和文字在链接里垂直对齐总差一点
不是图标画得不准，是 SVG 默认按基线（baseline）对齐，而文字基线和 SVG 的坐标原点不重合。尤其当文字用了不同字体或字号时，偏差更明显。
最稳做法是放弃所有 vertical-align 调整，改用 flex 包裹整个链接结构。但如果你必须用行内方式（比如老项目不能动 DOM 结构），那就得实测微调：
按钮式链接（<a role="button"></a>）怎么安全加 flex
当链接被当作按钮使用（比如带背景色、圆角、固定尺寸），就可以放心给它设 display: flex，因为它已脱离纯语义链接的约束。
这时要注意：flex 会让内部文字变成独立 item，<a></a> 的下划线默认消失，且伪类 ::after 热区可能偏移。
真正容易被忽略的是：图标是否真的“属于”这个链接。很多错位问题源头不在 CSS，而在 HTML 结构——比如图标放在 <a></a> 外、或被 <div> 隔开一层。flex 只管直系子元素，多一层标签，就得重新考虑包裹层级。</div>
