如何使用 CSS 将标题与两侧的水平线居中？

CSS：两侧水平线居中的标题

此挑战涉及创建以水平线垂直居中的页面标题（标题）两侧居中，同时保持背景图像的透明度。

要解决此问题，请考虑以下解决方案：

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}</code>

在此代码中：

• h1 元素相对定位且水平居中。
• 两个伪元素（:before 和 :after）用于创建两侧的水平线。
• 线条绝对定位，设置为距离顶部的 51%，标题宽度的一半。
• 要在文本周围创建透明区域，h1 元素的溢出属性设置为隐藏。
• 为了确保线条在与文本重叠时被隐藏，它们被赋予不间断空格 (a0) 作为其内容。
• 红色背景颜色使线条易于可见以用于演示目的。调整它以匹配您想要的样式。

此解决方案有效地将标题居中并创建所需的水平线，而无需引入任何其他 HTML 元素。

以上是如何使用 CSS 将标题与两侧的水平线居中？的详细内容。更多信息请关注PHP中文网其他相关文章！