如何让文本与水平线同宽精准对齐
来源：互联网 2026-07-06 08:17:05很多人写页面时都会遇到这种场景：标题文本下面加一条水平线，希望两者宽度严格一致、垂直居中，结果却总是跑偏——要么横线比文字长一截，要么干脆错位。这篇文章把根因和修复方案拆开来讲清楚。 实际开发中，标题文字和下方水平线宽度不一致、位置偏移的问题，根源往往不在“一个类名写错”这么简单。从你提供的原始代码
很多人写页面时都会遇到这种场景：标题文本下面加一条水平线，希望两者宽度严格一致、垂直居中，结果却总是跑偏——要么横线比文字长一截，要么干脆错位。这篇文章把根因和修复方案拆开来讲清楚。
实际开发中，标题文字和下方水平线宽度不一致、位置偏移的问题，根源往往不在“一个类名写错”这么简单。从你提供的原始代码来看，其实是结构缺陷 + 样式缺失共同造成的。原码里有三个致命伤：
- —— 标签配对都错了，被闭合成了
，而且.title这个类不应该直接加在分割线容器上；.horizontal-line没有设置宽度，默认是auto，也就是随内容撑开，而文本的宽度由文字本身决定，两者没有关联，当然对不齐；.company-name用了width: 20%，却没有配合text-align: center或Flex布局，子元素自然各走各路。要彻底解决，得同时满足三个条件：
- 结构要干净：用作为独立块状分隔符，别跟文本类混在一起；
- 宽度显式统一：让
.horizontal-line的宽度等于包裹它的父容器宽度；- 对齐逻辑一致：所有子元素（标题、横线、副标题）共享同一个盒模型对齐基准，比如
text-align: center或者Flex布局。下面是修复后的完整代码，可以直接拿去用：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
project-1 OneClick
Tech Solution
这个版本有几个关键的调整：
- 去掉了没必要的
id="company-name"，统一用class，语义更清晰，复用也方便； .horizontal-line的宽度设成100%，这样它就会严格继承父容器.company-name的20%宽度；- 给
.company-name加上text-align: center，让里面的和都水平居中；- 用
height + background-color代替border-top，避免边框把盒模型的高度算乱，控制起来更稳；- 删掉了冗余的
id="p-clear"——除非JS需要特定钩子，否则纯样式场景完全不需要ID。另外有几个细节值得留个心眼：
- 如果你希望横线比文字稍窄一点（比如两边留点白），可以把
.horizontal-line的宽度改成80%，再配合margin: 0 auto； - 千万别在
.title上加display: inline-block或float，否则text-align: center就不灵了； - 调试时务必打开浏览器开发者工具的“Computed”面板，确认
.horizontal-line的width真的继承自父容器，而不是被其他规则覆盖。
按这个思路调整之后，文本和水平线就能严格保持相同宽度，统一居中。效果就像Stack Overflow上那张示例图一样，整齐舒服。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
- 用
相关攻略
更多热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
- 宽度显式统一：让
