如何让文本与水平线在相同宽度下精准对齐-js教程-PHP中文网

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

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

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

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

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

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

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

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

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

抖音下载器(Node.js)

抖音无水印视频下载和文案提取工具

下载



    <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><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>

? 关键修改说明：