如何使用CSS在html标题的中间有一条水平线？

好吧，我现在用一个图像来做，但我想通过CSS来做（没有绝对或相对定位，我想让它响应）

这里的示例：。标题是“服务”，就在3个内容区域的正上方……我想用CSS实现同样的效果。我尝试了一些方法，但没有成功

---

谢谢。

我来试试。。。唯一的问题是

跨度

有一个设置的宽度

HTML

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

以下是我的做法->

• CSS3背景图像
• 背景覆盖背景图像的范围

HTML

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

---

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

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

标题
.标题{
宽度：100%；
文本对齐：居中；
线高：100%；
}
.航向跨度{
浮动：左；
利润率：20像素0-8像素；
边框：1px实心；
宽度：100%；
}
.品目h3{
显示：内联；
填充：0px 0px 0 20px；
宽度：自动；
保证金：自动；
}

跨度上的负基边距可能需要根据不同的标题尺寸进行调整，标题的背景颜色应与整个集装箱的背景相匹配

---

我正在研究一系列解决这个问题的方法，我真的想要一些简单的方法。为什么不直接使用

：before

和

：after

在标题中嵌入一些内容，以便在标题中插入水平规则/行呢。在下面的CSS中，我为标题的水平线选择了一个EM破折号（）。当制作更大的水平线时，根据您的字体，您需要从多个EM破折号中去掉字母间距。最后，您可以在EM破折号的头部和尾部添加一些填充，这样它就不会紧靠标题文本

下面是一些CSS，标题1非常简单，标题2有一条较长的线（见行动中）：

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

---

这个想法可能会被其他的热心者改进…去做吧

想给我们看看你尝试过的不起作用的地方吗？这可能是一个单独的问题-顺便说一句，回答得很好，但是如果标题和水平线位于不透明度为0.5的div内怎么办；我试图创建这个，但还没有找到任何解决方案。如果可能的话，我希望透明度在整个过程中保持一致。我不确定我是否看到了您所指的问题。看看这里->。这与你想要达到的目标相似吗？你唯一依赖的就是把颜色改成与背景相同的颜色。是的，太棒了。因此，我使用rgba作为背景，但当我实际使用不透明度时，效果非常好。谢谢Tinkerbin似乎消失了（被保留页所取代），我无法让这个示例工作。有人想把这个例子重新放在JSFIDLE这样的地方吗？

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

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

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