直接给a:hover加text-align:center无效，因text-align是父容器属性，不作用于行内元素自身；需将a设为inline-block或block并配合text-align:center，或用flex布局整体居中。
超链接悬停时文字居中失效的常见原因
直接给 a:hover 加 text-align: center 没用——text-align 是块级容器的属性，而 <a> 默认是行内元素，它不控制自身内部文字的“居中”，只影响其子内容在父容器中的对齐。真正要解决的，是让悬停状态下的链接表现得像一个可居中的块级区域。
让 a 标签悬停时支持文字居中
核心操作是改变链接的显示模式，同时确保它有明确的布局上下文：
- 给
a设置display: block或display: inline-block（推荐后者，避免强制换行） - 加上
text-align: center—— 此时它才真正生效 - 如果父容器本身宽度不定（比如在
<nav>或<div>中），建议同时设width: 100%或配合flex布局更稳妥
示例 CSS：
a {
display: inline-block;
text-align: center;
}
a:hover {
text-align: center; /* 可省略，继承即可 */
background-color: #f0f0f0;
}为什么用 inline-block 而不是 block
用 display: block 会让每个链接独占一行，破坏原本的水平导航结构；而 inline-block 既保留了行内流式排列，又获得块级元素的样式控制能力，是悬停居中最自然的选择。
立即学习“前端免费学习笔记（深入）”；
- 注意：
inline-block元素间默认有空白符间隙，若需紧密排列，可在父容器加font-size: 0，再在a内重置font-size - 移动端点击热区小？补上
padding——inline-block支持内边距，能有效扩大可点击区域
更现代的写法：用 flex 替代 text-align
如果父容器可控（如导航栏 <nav>），直接用 Flex 布局更可靠：
nav {
display: flex;
justify-content: center;
}
nav a {
display: block;
padding: 8px 16px;
}这样悬停时无需额外设置居中，整个导航条已居中，每个链接点击区域也更清晰。但要注意：justify-content: center 居中的是子项整体，不是单个链接内的文字——文字是否居中仍取决于 a 自身的 text-align，所以通常还是保留 text-align: center 更保险。
真正容易被忽略的是：居中效果是否在所有屏幕尺寸下都成立。如果父容器宽度随视口变化，仅靠 text-align 可能失效，这时候必须确认父容器是否设置了 width、max-width 或使用了 flex/grid 等主动布局方式。
