CSS中带中心图像的分割器？

我怎样才能使这个分隔器在CSS的中心有一个标志！我一直在努力，但还没有接近。实现这一目标的最佳方式是什么

谢谢大家!

更新 这需要放置在bg图像的顶部，以便徽标周围的间隙必须透明

对不起，伙计们，这个有点棘手我知道

这是PNG

---

这将是一种方法：

.hr {
   height: 50px; /* imageheight */
   background: #fff url(http://placekitten.com/100/50) no-repeat  center; 
}     

.hr hr {
   top: 50%; 
   position: relative;
}

<div class="hr"><hr /></div>

.hr{
高度：50px；/*图像高度*/
背景：#fff url(http://placekitten.com/100/50)无重复中心；
}     
.人力资源{
最高：50%；
位置：相对位置；
}

这将是另一个：

.hr2{
  display: block;
  border-top: 2px solid black; 
  height: 2px;
}
.hr2 img {
  display: block;
  margin: auto;
  margin-top: -31px; /*img-height /-2 + height / 2 */ 
  /* adjustments for 'margin' to border */
  padding: 0 20px; 
  background: #fff;
}

<div class="hr2"><img src ="http://placekitten.com/100/60"></div>

.hr2{
显示：块；
边框顶部：2件纯黑；
高度：2倍；
}
.hr2 img{
显示：块；
保证金：自动；
页边距顶部：-31px；/*图像高度/-2+高度/2*/
/*对边界的“保证金”进行调整*/
填充：0 20px；
背景：#fff；
}

---

演示：

这将是一种方法：

.hr {
   height: 50px; /* imageheight */
   background: #fff url(http://placekitten.com/100/50) no-repeat  center; 
}     

.hr hr {
   top: 50%; 
   position: relative;
}

<div class="hr"><hr /></div>

.hr{
高度：50px；/*图像高度*/
背景：#fff url(http://placekitten.com/100/50)无重复中心；
}     
.人力资源{
最高：50%；
位置：相对位置；
}

这将是另一个：

.hr2{
  display: block;
  border-top: 2px solid black; 
  height: 2px;
}
.hr2 img {
  display: block;
  margin: auto;
  margin-top: -31px; /*img-height /-2 + height / 2 */ 
  /* adjustments for 'margin' to border */
  padding: 0 20px; 
  background: #fff;
}

<div class="hr2"><img src ="http://placekitten.com/100/60"></div>

.hr2{
显示：块；
边框顶部：2件纯黑；
高度：2倍；
}
.hr2 img{
显示：块；
保证金：自动；
页边距顶部：-31px；/*图像高度/-2+高度/2*/
/*对边界的“保证金”进行调整*/
填充：0 20px；
背景：#fff；
}

---

演示：

好吧，如果你的背景非常简单，那么它就相对简单

HTML文件

<header>
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</header>

<div id="header">
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</div>

---

编辑

对于主体（或包含div）不是纯色的情况，请尝试以下操作：

HTML

<header>
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</header>

<div id="header">
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</div>

---

或者甚至是一个基于

显示：table

的示例，但在调整大小时这有点不可靠

---

好吧，如果你的背景是完全简单的，那么它就相对简单

HTML文件

<header>
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</header>

<div id="header">
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</div>

---

编辑

对于主体（或包含div）不是纯色的情况，请尝试以下操作：

HTML

<header>
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</header>

<div id="header">
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</div>

---

或者甚至是一个基于

显示：table

的示例，但在调整大小时这有点不可靠

---

嗯，这是好东西，但问题是这是在背景图像的基础上进行的：（Thankstorry误解了。我会想出另一个选项。但是，当放置在bg img顶部时，徽标的bg颜色是可见的。我尝试将其设置为透明的，但人力资源线会完全可见。非常感谢您的麻烦。非常感谢！让我们嗯，好东西，但问题是，这是在ba的顶部CKG地面img：（Thankstorry误解了。我会想出另一个选项。但是，当放置在bg img上时，徽标的bg颜色是可见的。我尝试将其设置为透明的，但人力资源线会完全可见。非常感谢您的麻烦。非常感谢！让我们只需要在徽标周围留一些左右边距。我注意，在我的图片上，这条线没有穿过整个徽标。你可以使用另一个容器，或者为它添加填充和背景色。我明白了；），但问题是这条线位于bg img的顶部，所以我不能给它任何bg颜色：（干杯！这更棘手。你应该更新问题，更具体一点。只需要在徽标周围留一些左右边距。如果你注意到我的图像上的线条没有穿过整个徽标，你可以使用另一个容器，或者添加填充和背景色。我明白了；）但问题是，这是在bg img之上的，所以我不能给它任何bg颜色：（干杯！这更棘手。你应该更新问题，更具体一点。