直接给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 标签悬停时支持文字居中

核心操作是改变链接的显示模式，同时确保它有明确的布局上下文：

• 给 a 设置 display: block 或 display: inline-block（推荐后者，避免强制换行）
• 加上 text-align: center —— 此时它才真正生效
• 如果父容器本身宽度不定（比如在 <nav></nav> 或 <div> 中），建议同时设 <code>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 既保留了行内流式排列，又获得块级元素的样式控制能力，是悬停居中最自然的选择。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 注意：inline-block 元素间默认有空白符间隙，若需紧密排列，可在父容器加 font-size: 0，再在 a 内重置 font-size
  • 移动端点击热区小？补上 padding —— inline-block 支持内边距，能有效扩大可点击区域

  更现代的写法：用 flex 替代 text-align

  如果父容器可控（如导航栏 <nav></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 等主动布局方式。