Html 如何设置此样式<；人力资源>；中间有图像和文字？ 所以我用中间的图像和文字的概念来塑造这个水平线，然后被卡住了。如何将图像对齐在“文本”的左侧而不是下方？以下是演示当前状态的链接：

谢谢你的帮助

.horizontal__rule--modified {
  line-height: 1em;
  position: relative;
  border: 0;
  color: #666666;
  text-align: center;
  height: 1.5em;
  opacity: 0.7;
  letter-spacing: 1px;
  font-size: 16px;
  &:before {
    content: url(http://www.metalguitarist.org/forum/images/mgtwitter.png);
    background: red;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 .5em;
    line-height: 1.5em;
    color: red;
    background-color: #fcfcfa;
  }
}

<hr class="horizontal__rule--modified" data-content="TEXT">

.horizontal\u规则--已修改{
线高：1米；
位置：相对位置；
边界：0；
颜色：#666666；
文本对齐：居中；
高度：1.5em；
不透明度：0.7；
字母间距：1px；
字体大小：16px；
&：之前{
内容：网址(http://www.metalguitarist.org/forum/images/mgtwitter.png);
背景：红色；
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
高度：2倍；
}
&：之后{
内容：attr（数据内容）；
位置：相对位置；
显示：内联块；
颜色：黑色；
填充：0.5em；
线高：1.5em；
颜色：红色；
背景色：#fcfa；
}
}

实际上，在这里你根本不需要

。您只需使用伪元素即可：

*{
字体系列：“SegoeUI”；
字体大小：正常；
}
h1{
文本对齐：居中；
}
h1跨度{
背景色：#fff；
填充：15px；
}
h1：：之后{
显示：块；
内容：“；
边框：1px实心#ccc；
边缘顶部：-0.5em；
}

---

Hello

除了Praveen之外，另一个解决方案是使用flex box

HTML

<div class="wrapper">
  <div class="line"></div>
  <div class="text">
    Test
  </div>
  <div class="line"></div>
</div>

---

小提琴：

只是一个简单的问题。我的答案是您所期望的，还是有所不同？没有一个自动关闭元素可以携带伪元素；i、 e.

，

，

，

，等等@如果您想使用生成的内容，PraveenKumar有正确的方法。HTML语义被高估了。@Smithy这样做？来源：嘿，对不起，忘了感谢@Jayx编辑了我的答案<代码>：D

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.line {
  height: 10px;
  background: black;
  width: 100%;
}
.text {
  padding: 0 10px;
}