html - 图像居中的水平尺

Question

我搜索了一大堆，但找不到任何接近它的东西..

我想要一条以图像为中心的水平线..使用 HR 标签或任何其他方式实现此目标的最佳方式是什么？

这是我要使用的图像:http://www.dylanvanheugten.nl/images/logo.png

提前致谢!

Answer 1

这可能会让你开始:

HTML:

<div class="line">
  <span class="logo"></span>
</div>

CSS:

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  padding: 0 5px;
  height: 50px;
  width: 50px;
  background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%;
}

.line {
  position: relative;
  overflow: visible;
  height: 1px;
  background-color: #ddd;
  border: 1px solid #ddd;
}

这是一个你可以玩的 fiddle :http://jsfiddle.net/4tZLD/1/