如何在带有 CSS 的 html 标题中间有一条水平线？答案

【问题标题】：How to have a horizontal line at the middle of a html heading with CSS?如何在带有 CSS 的 html 标题中间有一条水平线？
【发布时间】：2015-07-18 05:29:02
【问题描述】：

好的，我现在使用图像来执行此操作，但我想通过 CSS 执行此操作（没有绝对或相对定位，我希望使其具有响应性）。

此处的示例：http://teothemes.com/wp/services/。标题是“服务”，就在 3 个内容区域的正上方……我想只用 CSS 来实现相同的效果。我尝试了一些方法，但没有成功。

谢谢。

【问题讨论】：

愿意向我们展示您尝试过但没有成功的方法吗？
How to position text over border?的可能重复

标签： html css

【解决方案1】：

这就是我的做法 -> http://tinkerbin.com/QN9efWHd

CSS3 背景图片
背景覆盖背景图像。

HTML...

<p>
    <span>Services or Something</span>
</p>

...对于 CSS...

p {
    background: linear-gradient (to bottom,  rgba(145,37,37,0) 49%,
                rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
                rgba(145,37,37,0) 54%);
    text-align: center;
}

span {
    display: inline-block;
    padding: 0 10px;
    background: #fff;
}

【讨论】：

这是一个单独的问题-顺便说一句，答案很好，但是如果标题和水平线位于不透明度为 0.5 的 div 内怎么办；我正在尝试创建它，但没有找到任何解决方案。如果可能，我希望不透明度始终保持一致。
我不确定我是否看到您所指的问题。看看这里 -> tinkerbin.com/VQ9yPQnd 。它与您想要实现的目标相似吗？您唯一依赖的是将跨度颜色更改为与它正上方的背景相同的颜色。
是的，太棒了。所以，我使用 rgba 作为背景，但是当我实际使用不透明度时，效果很好。谢谢！
Tinkerbin 似乎消失了（被一个保留页面取代），我无法让这个例子工作。有人愿意在 JSfiddle 之类的地方重新托管该示例吗？

【解决方案2】：

这是我的尝试...唯一的问题是 spans 有一个固定的宽度。

HTML

<div id="hr">
    <span></span>
    asdf
    <span></span>
</div>

CSS

#hr span {
    width:200px;
    border-bottom:1px solid #ccc;
    display: inline-block;
    margin-bottom:5px;
}

DEMO

【讨论】：

【解决方案3】：

使用一个带边框的浮动跨度：

<div class="heading">
     <span></span>
     <h3>Heading<h3>
</div>


.heading {
    width: 100%;
    text-align: center;
    line-height: 100%;    
}

.heading span {
    float: left;
    margin: 20px 0 -8px;
    border: 1px solid;
    width: 100%;
}

.heading h3 {
    display: inline;
    padding: 0px 0px 0 20px;  
    width: auto;
    margin: auto;
}

可能需要针对不同的标题大小调整跨度上的负基本边距。 , 标题的背景颜色要与整个容器的背景颜色相匹配。

JS Fiddle demo

【讨论】：

【解决方案4】：

我正在寻找一系列解决方案来解决这个问题，我真的想要一些简单的方法。为什么不直接使用:before 和:after 将一些内容嵌入到您想要有水平规则/线的标题中。在我下面的CSS 中，我选择了一个EM DASH (unicode \2014) 作为标题的水平线.当制作较大的水平线时，根据您的字体，您需要从多个 EM DASH 中去除字母间距。最后，您可以在 EM DASH 的头部和尾部添加一些填充，这样它就不会压在您的标题文本上。

这里有一些 CSS，heading-1 很简单，heading-2 有更长的行（见实际操作https://jsfiddle.net/pyxkh3jz/）：

h1:before, h1:after {
    content:"\2014";
}
h2:before, h2:after {
    /* two dashes */
    content:"\2014\2014";
    /* depending on your font adjust this */
    letter-spacing: -6px;
}
/* add some padding so heading text isn't touching lines */
h2:before {
    padding-right: 15px;
}
h2:after {
    padding-left: 15px;
}

这里没有检查浏览器兼容性；但这不是激进的 CSS，所以它应该适用于你们中的一些人或大多数人。线条及其长度适合我的用例。

这个想法可能会被其他狂热者改进……试试吧！

【讨论】：