css - CSS中居中图像的分隔线？

Question

如何在 CSS 的中心制作带有徽标的分隔线？！我一直在尝试，但还没有接近。实现这一目标的最佳方法是什么。

谢谢！

更新 这需要放置在背景图像的顶部，因此徽标周围的间隙必须是透明的。

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

这是PNG

Answer 1

好吧，如果你的背景很简单，那么它就相对简单了。

的HTML

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

CSS

body {
  margin: 0;
  background: white;
}

#logo {
  width: 200px; /* Width of image */
  padding: 40px; /* Creates space around the logo */
  margin: 0 auto; /* Centers the logo */
  background: white; /* Must be same as body */
  position: relative; /* Brings the div above the header:after element */
}

#logo img {
  display: block;
}

/* :after pseudo element to create the horizontal line */
header:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}

工作演示在这里。

---

编辑

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

HTML

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

CSS

body {
  margin: 0;
}

#logo {
  width: 100%;
}

#logo, #logo:before, #logo:after {
  float: left;
}

#logo:before, #logo:after {
  content: '';
  width: 50%;
  min-height: 100px; /* height of image */
  border-bottom: 1px solid #ccc;
  margin-top: -50px;
}

#logo:before {
  margin-left: -120px;
}

#logo:after {
  margin-right: -120px;
}

#logo img {
  float:left;
  padding: 0 20px;
}

工作演示在这里。

---

或者甚至是基于 的示例display: table，但是在调整大小时这有点不稳定。

http://jsbin.com/ITAQitAv/10/edit

Answer 2

这将是一种方法：

.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>

这将是另一个：

.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>

演示：http ://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview