html中如何在两个水平线中添加文字

最稳妥做法是用带上下边框的div容器包裹文字并居中；若必须用hr，则通过伪元素+绝对定位注入文字，但需注意html合法性与浏览器兼容性。

用 <hr> 和定位实现文字居中覆盖

HTML 原生不支持直接在 <hr> 上显示文字——<hr> 是个空元素，没有子内容空间。想让文字“出现在两条水平线之间”，本质是视觉叠加，不是语义嵌套。

最稳妥的做法是放弃把文字塞进 <hr>，改用容器 + 边框模拟：

• 用一个 <div> 包裹文字，设上下边框（<code>border-top 和 border-bottom）来充当“两条线”
• 文字本身用 margin 或 padding 居中，避免依赖绝对定位带来的响应式问题
• 别用 <hr> 套 <span></span>，浏览器会忽略子内容，或触发怪异渲染（比如 chrome 下文字被截断）

<div style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0.5em 0; text-align: center;">   中间文字 </div>

用伪元素给 <hr> 添加文字（需 CSS 支持）

如果必须保留 <hr> 标签结构（比如 CMS 输出受限），可用 ::before 或 ::after 伪元素把文字“贴”上去。

关键点在于：文字不能是 <hr> 的子节点，得靠 CSS 注入；否则 HTML 无效，且多数浏览器不渲染。

立即学习“前端免费学习笔记（深入）”；

• 给 <hr> 加 position: relative，为伪元素提供定位上下文
• 伪元素设 content: "文字"、position: absolute、top: 50%、transform: translateY(-50%) 实现垂直居中
• 注意兼容性：<hr> 默认是块级元素，但某些老版 IE 对伪元素支持弱，慎用于需要兼容 IE11 及以下的场景

<hr style="position: relative; margin: 1em 0;"> <style> hr::after {   content: "or";   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   background: #fff;   padding: 0 0.5em;   color: #666; } </style>

为什么不用 <hr> <span>文字</span>？

这种写法在 HTML 中非法：<hr> 是 void element（空元素），不允许有结束标签，更不能包含子元素。浏览器解析时会自动闭合 <hr>，导致后续 <span></span> 被挤到外面，实际 dom 结构变成：

<hr> <span>文字</span>

结果就是文字在水平线下方，而不是“中间”。开发者工具里一眼就能看出结构错乱。

• 验证方式：把代码粘到 W3C HTML Validator，会报 Error: Element hr is missing required Attribute “size”.（旧标准）或直接标红语法错误
• 即使看起来“显示正常”，也是浏览器容错渲染的结果，不可靠，尤其在 strict mode 下容易崩

文字和线条颜色/粗细不匹配怎么办？

常见问题是文字背景没遮住线条，导致文字边缘发虚，或线条太细被文字盖住。

• 确保伪元素或容器的 background-color 和父容器背景一致（比如白色背景就设 background: #fff）
• 线条用 border 比用 hr { height: 1px } 更可控；后者依赖 line-height，容易因字体大小变化偏移
• 如果文字要响应式缩放，别用固定 px 值设 padding 或 font-size，改用 em 或 rem

真正难的不是加文字，而是让文字在各种字号、缩放、暗色模式下都稳稳卡在线条正中——这时候就得放弃“一行 CSS 解决”的幻想，老实用容器+边框，可控性高得多。