概述与原理
在网页设计中，我们经常会遇到需要在水平分隔线中间插入文本的需求，例如“或”、“更多选项”等提示。这种效果的实现关键在于：
- 创建一条水平线。
- 将文本放置在线条的中央。
- 使文本区域的背景与页面背景色一致，从而在视觉上“切断”线条。
- 确保这种布局能够适应不同字号的文本，并且文本始终垂直居中于线条。
传统的做法可能涉及使用伪元素或复杂的定位，但本教程将介绍一种更简洁、更具弹性的方法，利用CSS的transform属性来实现完美的垂直居中。
核心实现技术
此技术主要依赖于两个关键元素：一个作为容器的父元素（负责绘制线条和水平居中文本），以及一个包含文本的子元素（负责文本显示和垂直居中）。
父元素（容器）的CSS设置
父元素（例如一个div）的主要职责是创建水平线并确保其子元素（文本）在水平方向上居中。
立即学习“前端免费学习笔记（深入）”；
.ruler {
border-bottom: 1px solid black; /* 创建底部边框作为水平线 */
text-align: center; /* 使子元素（文本）水平居中 */
height: 0px; /* 关键：将父元素高度设为0，确保线条位于其底部 */
margin: 20px 0; /* 可选：为容器添加上下外边距，以提供视觉空间 */
}- border-bottom: 1px solid black;: 这是创建水平线的主要方式。你可以根据需要调整线条的颜色、粗细和样式。
- text-align: center;: 这是一个非常方便的属性，用于将其内部的行内或行内块级子元素水平居中。
- height: 0px;: 这是实现垂直居中的关键一步。 当父元素的高度为0时，其border-bottom实际上就成为了父元素的“中心线”或参考线。这样，后续对子元素的垂直定位操作将以这条线为基准。
子元素（文本）的CSS设置
子元素（例如一个span）负责显示文本，并使其在水平线上方垂直居中，同时“切断”线条。
.text {
background-color: white; /* 关键：与页面背景色相同，用于“切断”线条 */
padding: 0px 8px; /* 为文本提供左右内边距，使其与线条有适当间距 */
transform: translateY(-50%); /* 关键：向上平移自身高度的50%，实现垂直居中 */
display: inline-block; /* 允许应用transform和padding，并保持文本的行内特性 */
font-weight: 500; /* 字体粗细 */
font-size: 16px; /* 默认字体大小 */
}- background-color: white;: 这是视觉上“切断”线条的关键。确保此颜色与你的网页背景色（或包含此元素的背景色）完全一致。
- padding: 0px 8px;: 提供水平方向的内边距，使文本与线条之间有足够的空白，增加可读性。垂直方向的内边距可以根据设计需求调整，但通常设置为0即可。
- transform: translateY(-50%);: 这是实现文本垂直居中的核心。 translateY()函数将元素沿Y轴平移。-50%表示向上平移自身高度的50%。由于父元素的高度为0，其border-bottom是参考线，文本元素向上平移自身高度的一半，就能完美地使其垂直中心与border-bottom对齐。
- display: inline-block;: 允许元素像块级元素一样应用宽度、高度、内边距和transform属性，同时又保持其在文本流中的行内特性，以便text-align: center能够对其生效。
完整示例代码
以下是一个完整的HTML和CSS示例，展示了如何实现此效果，并演示了不同字号文本的自适应性。
HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本内嵌水平线示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ruler">
<span class="text">我的小文本</span>
</div>
<div class="ruler">
<span class="text large-text">我的大文本示例</span>
</div>
<div class="ruler">
<span class="text custom-text">自定义文本大小和颜色</span>
</div>
</body>
</html>CSS 样式 (style.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0; /* 页面背景色，用于匹配 .text 的背景 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.ruler {
border-bottom: 1px solid #ccc; /* 浅灰色线条 */
text-align: center;
height: 0px;
width: 80%; /* 示例：设置线条宽度 */
max-width: 600px;
margin: 40px 0; /* 增加上下外边距，使示例更清晰 */
}
.text {
background-color: #f0f0f0; /* 必须与 body 的背景色匹配 */
padding: 0px 12px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
color: #333; /* 文本颜色 */
}
/* 演示不同字号的文本，验证方案的自适应性 */
.large-text {
font-size: 24px; /* 较大的字体 */
font-weight: bold;
}
.custom-text {
font-size: 18px;
color: #007bff; /* 蓝色文本 */
background-color: #f0f0f0; /* 仍然需要匹配背景 */
padding: 0px 15px;
}注意事项与总结
- 背景色匹配： 确保.text元素的background-color与它所在的父容器或页面背景色完全一致。如果不一致，会出现一个方块而不是“切断”线条的效果。
- transform: translateY(-50%)的优势： 这个属性的百分比值是相对于元素自身的高度计算的。这意味着无论文本的font-size如何变化，translateY(-50%)都能准确地将文本的中心点对齐到父元素的border-bottom上，从而实现完美的垂直居中，无需调整固定像素值。
- 避免伪元素： 这种方法直接作用于文本元素，避免了使用::before或::after等伪元素，使HTML结构更简洁，CSS逻辑更直观。
- 语义化： 这种视觉效果通常用于装饰性或辅助性文本。如果文本本身具有重要的语义，请确保其在HTML中的结构是合理的。
- 浏览器兼容性： transform属性在现代浏览器中具有良好的兼容性。
通过上述方法，您可以轻松且灵活地在网页中创建出美观且自适应的文本内嵌水平线效果，提升用户界面的专业性和视觉吸引力。
