0

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

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

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

提前致谢！

4

5 回答 5

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;
}

这是一个你可以玩的小提琴：http: //jsfiddle.net/4tZLD/1/

于 2013-08-09T08:14:20.187 回答
0

你可以参考这篇文章。也许您可以找到一个涵盖所有浏览器（或至少是您关心的浏览器）的解决方案：

http://www.sovavsiti.cz/css/hr.html

于 2013-08-09T08:10:06.467 回答
0

希望这将最终提供一个简单的解决方案，以解决将水平放置的图形居中并在调整大小时自动定位的永无止境的追求。大多数浏览器都支持 calc() 方法。以下语法使用宽度为 728px 的图形。

全宽 = 728px，得到 50% = 364px。然后应用以下内容：

#imagecentre1 {
left : calc(100% / 2 - 364px);
/*rest of syntax */
}

确保“+”和“-”两侧的“空白”很重要，以确保负值和正值都正确工作，并且为了连续性，实践应适用于“/”和“*”。我相信有人会确认执行顺序，从记忆中它将是+，-，x，/。Calc() 具有基本功能，没有“自动”！
预计会有一些限制。只要给它旋转！

于 2014-08-26T22:28:53.360 回答
0

如果我理解正确的话，我认为你想要这样的东西。

http://jsfiddle.net/9yjmU/

HTML：

<div class="image">
    <img src="http://www.dylanvanheugten.nl/images/logo.png"/>
</div>
<div class="line">
</div>

CSS：

.image{
    text-align: center;
}

.line{
    border-top: 1px solid black;
    margin-top: -20px;
}

您可以看到我使用了带有 aborder-top和 a的 div，margin-top: -20px;因此它位于图像的中心（看起来很40px;高度）。

于 2013-08-09T08:14:36.523 回答
0

HTML：

<div class="line">
    <img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg">
</div>

CSS：

.line {
    border-bottom: 1px solid black;
    text-align:center;
    height:17px;
    margin-bottom:17px;
}

.lineImg {
    background-color:white;
    padding:0px 5px 0px 5px;
}

见：http: //jsfiddle.net/V5wj6/3/

的 height 和 margin-bottom.line需要精确到 img 的一半高度，这样图像将垂直居中在线，以下内容不会直接位于边框下方。

在.lineImg样式中，背景颜色通过删除 img 下方的线条使其看起来更好，并且填充为其提供了更多空间，您将不得不调整页面的背景颜色

于 2013-08-09T08:20:25.363 回答