text-align: center 不影响下划线显示，它仅控制行内内容（如a标签）在父容器中的水平对齐，与text-decoration无关；下划线消失通常因text-decoration: none、颜色对比度低或渲染偏移所致。
text-align: center 不影响下划线显示
居中本身不会“吃掉”下划线，text-align: center 只控制行内内容（包括 a 元素）在其父容器中的水平对齐方式，和 text-decoration 完全无关。只要链接本身没被其他样式覆盖，下划线照常渲染。
a 标签居中后下划线突然消失？检查这几点
下划线“不见了”，大概率不是居中导致的，而是以下常见干扰项：
-
a元素被显式设置了text-decoration: none（比如全局重置或框架类名如text-decoration-none） - 父容器用了
text-decoration: underline或类似伪元素模拟装饰，而子a被设为text-decoration: none后反而“盖住”了继承错觉 - 链接文字颜色与背景对比度过低（比如浅灰字+白底），下划线存在但肉眼难辨——用 Chrome DevTools 的 “Computed” 面板查
text-decoration-line值确认是否真为underline - 用了
display: inline-block或flex居中后，意外触发了某些浏览器对内联元素下划线的渲染偏移（极少见，可加vertical-align: baseline对齐）
居中 + 保留下划线的稳妥写法
想让链接居中且下划线清晰可见，优先用语义明确、行为可控的方式：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对父容器用
text-align: center（适合单行文本流）：<div style="text-align: center"><a href="#">居中链接</a></div>
- 对父容器用
display: flex; justify-content: center（更通用，支持多行/响应式）：<div style="display: flex; justify-content: center"><a href="#">居中链接</a></div>
- 确保链接自身没被覆盖下划线：
a { text-decoration: underline; }（显式声明比依赖浏览器默认更可靠） - 若需 hover 时强化反馈，补上：
a:hover { text-decoration: underline; }（避免悬停时下划线意外消失）
真正容易被忽略的点：居中不解决可识别性
居中后的链接如果只有颜色变化+下划线，色弱用户或高亮度屏幕上依然可能无法分辨。下划线是辅助线索，不是唯一线索。别只盯着“怎么让它居中还带下划线”，更要检查：color 与背景的对比度是否 ≥ 4.5:1；是否在 :focus 状态提供了键盘导航可见的 outline 替代样式；是否在纯文字段落里混入多个无图标链接——这时候下划线再明显，也挡不住用户扫一眼就错过。
立即学习“前端免费学习笔记（深入）”；
