如何让文本与水平线同宽精准对齐

很多人写页面时都会遇到这种场景：标题文本下面加一条水平线，希望两者宽度严格一致、垂直居中，结果却总是跑偏——要么横线比文字长一截，要么干脆错位。这篇文章把根因和修复方案拆开来讲清楚。

实际开发中，标题文字和下方水平线宽度不一致、位置偏移的问题，根源往往不在“一个类名写错”这么简单。从你提供的原始代码来看，其实是结构缺陷 + 样式缺失共同造成的。原码里有三个致命伤：

1. —— 标签配对都错了，

   被闭合成了，而且.title这个类不应该直接加在分割线容器上；
2. .horizontal-line没有设置宽度，默认是auto，也就是随内容撑开，而

   文本的宽度由文字本身决定，两者没有关联，当然对不齐；

3. .company-name用了width: 20%，却没有配合text-align: center或Flex布局，子元素自然各走各路。

要彻底解决，得同时满足三个条件：

• 结构要干净：用
  作为独立块状分隔符，别跟文本类混在一起；
• 宽度显式统一：让.horizontal-line的宽度等于包裹它的父容器宽度；
• 对齐逻辑一致：所有子元素（标题、横线、副标题）共享同一个盒模型对齐基准，比如text-align: center或者Flex布局。

下面是修复后的完整代码，可以直接拿去用：

                    
        
            
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上那张示例图一样，整齐舒服。