如何使文本与水平线在同等宽度下精准对齐

作者：袖梨 2026-07-01

本文详解如何通过 HTML 结构修正与 CSS 样式优化，使标题文字与下方水平线（<div class="horizontal-line">）严格保持一致宽度，并垂直居中对齐，解决因类名误用、元素嵌套错误及缺失宽度控制导致的布局错位问题。

本文详解如何通过 html 结构修正与 css 样式优化，使标题文字与下方水平线（`

`）严格保持一致宽度，并垂直居中对齐，解决因类名误用、元素嵌套错误及缺失宽度控制导致的布局错位问题。

在您提供的代码中，核心问题并非仅是 id 与 class 的混淆，而是结构性缺陷 + 样式缺失共同导致了文本与水平线宽度不一致、位置偏移。原始代码存在三处关键错误：

<div class="title horizontal-line"></span>：标签严重错误——<div> 被错误闭合为 </span>，且 .title 类不应直接应用于分割线容器；
.horizontal-line 未设置宽度，其默认宽度为 auto（即内容宽度），而 <p> 文本宽度由内容决定，二者无关联，必然错位；
.company-name 使用 width: 20%，但未配合 text-align: center 或 display: flex 等布局方式，导致子元素无法统一基准对齐。

✅ 正确解法需同时满足三点：

结构语义清晰：用 <div class="horizontal-line"> 作为独立块级分隔符，不混用文本类；
宽度显式统一：让 .horizontal-line 与包裹容器（.company-name）同宽；
对齐逻辑一致：所有子元素（标题、横线、副标题）共享同一盒模型基准（如 text-align: center 或 Flex 布局）。

以下是修复后的完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>project-1</title>    <style>        .title {            margin: 0;            padding: 0;            font-weight: bold;        }        .horizontal-line {            height: 2px;            background-color: black;            width: 100%; /* 关键：与父容器等宽 */            margin: 8px auto; /* 垂直居中留白 */        }        .company-name {            width: 20%;            margin: 2rem auto; /* 水平居中于页面 */            text-align: center; /* 所有内联/块级子元素居中对齐 */        }        /* 可选：增强响应性 */        @media (max-width: 768px) {            .company-name {                width: 90%;            }        }    </style></head><body>    <header>        <div class="company-name">            <p class="title">OneClick</p>            <div class="horizontal-line"></div>            <p class="title">Tech Solution</p>        </div>    </header>    <footer></footer></body></html>

? 关键修改说明：