Html 如何用css画一条线并在上面显示文本或图像 我试图用CSS画一条线，在中间显示文本/图像。

。特色图片{
颜色：#666666；
边框：2px实心#333333；
}

精选的

类似的东西

CSS:

---

演示1

：根{padding:40px}
p{
位置：相对位置；
边距：40px自动；填充：0 10px；
背景：白色；
显示：内联块；
}
p:之前，p:之后{
内容：“；
位置：绝对位置；
z指数：-1；
右：0
}
p:以前{
顶部：-4px；
左：-24px；
高度：24px；
宽度：480px；
边框：实心1px#666666
}
p:之后{
最高：50%；
宽度：466px；
左-16px；
边框顶部：实心1px#666666
}

---

精选

将文本包装在

span

中，并使用：伪元素作为行

使用

z-index:-1

将行（：伪元素）放在

span

后面，这样您就可以在文本中移动，而不必担心行

。特色图片{
位置：相对位置；
颜色：#666666；
边框：2px实心#333333；
填充：0 10px 0 30px；
}
.特色图片{
颜色：#666666；
背景：白色；
填充：0 10px；
}
.特色图片：之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景#666666；
左：0；
最高：50%；
转化：translateY（-50%）；
z指数：-1；
}

精选结果

保持联系
是的，非常酷，谢谢！此外，任何时候我都会看到这样的事情。我真想知道你是怎么做到的。是的，很酷，谢谢！此外，任何时候我都会看到这样的事情。我真想知道你是怎么做到的。我的意思是，有时候我看到那条直下斜线很酷，谢谢！此外，任何时候我都会看到这样的事情。我真想知道你是怎么做到的。我的意思是，有时我看到的是右下斜线
.featured-images {
    color: #666666;
}
p span {
    margin:0;padding: 0 10px;
    background: #FFFFFF;
    display: inline-block;
}
p {
    padding-left: 20px;
    position: relative;
    z-index: 2;   
}
p:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: solid 1px #666666;
    z-index: -1;
}

 <div style="height: 2px; background-color: black; text-align: center">
      <span style="background-color: white; position: relative; top: -0.5em;">
        Stay Connected
      </span>
    </div>