当前位置：首页 > 前端开发 > 正文

html如何在横线中插入文字

admin
前端开发
2025-07-14
4820

HTML中，可通过在文字前后添加标签，并在中间插入文字实现横线中插入文字

HTML中，要在横线中插入文字，可以通过多种方法实现,以下是几种常见的方式及其详细解释：

使用`<hr>`标签与CSS样式

<hr>标签用于在HTML页面中创建一条水平线，通常用于分隔内容，要在横线中插入文字，可以结合CSS的text-align、line-height、position等属性来实现。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">横线中插入文字</title>
    <style>
        .divider {
            position: relative;
            width: 100%;
            margin: 20px 0;
            overflow: hidden;
        }
        .divider::before, .divider::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 40%;
            border-bottom: 1px solid #000;
        }
        .divider::before {
            left: 0;
        }
        .divider::after {
            right: 0;
        }
        .divider span {
            position: relative;
            padding: 0 10px;
            background-color: #fff;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="divider"><span>这是横线中的文字</span></div>
</body>
</html>

解释：

html如何在横线中插入文字第1张

.divider类定义了一个相对定位的容器,用于包裹横线和文字。
::before和::after伪元素分别在容器的左右两侧创建两条横线。
span元素用于显示横线中的文字，并通过position: relative和z-index: 1确保文字位于横线之上。

使用表格（`<table>`）实现

通过表格的布局特性，也可以在横线中插入文字,这种方法适用于需要更复杂布局的场景。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">表格中插入横线文字</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            text-align: center;
            border-bottom: 1px solid #000;
        }
        .line-text {
            background-color: #fff;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>这是横线左侧的文字</td>
            <td class="line-text">横线中的文字</td>
            <td>这是横线右侧的文字</td>
        </tr>
    </table>
</body>
</html>

解释：

创建一个三列的表格,中间列用于显示横线中的文字。
通过border-bottom属性为表格行添加下边框,形成横线效果。
.line-text类用于设置中间列的背景色和内边距,确保文字清晰可见。

使用Flexbox布局实现

Flexbox布局提供了一种灵活的方式来对齐和分布子元素,非常适合用于在横线中插入文字。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">Flexbox实现横线文字</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            margin: 20px 0;
        }
        .text {
            background-color: #fff;
            padding: 0 10px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">横线中的文字</div>
    </div>
</body>
</html>

解释：

.container类定义了一个Flex容器，通过justify-content: center和align-items: center将子元素居中对齐。
通过border-top和border-bottom属性为容器添加上下边框,形成横线效果。
.text类用于设置文字的背景色和内边距,确保文字位于横线之上。