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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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/

.line的高度和边距 - 底部需要超出img高度的一半，这样，图像将垂直居中于线条上，以下内容不会直接位于边框下方。

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

Answer 5

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

全宽= 728像素，得50％= 364像素。然后应用以下内容：

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

确保“白色空间”非常重要。＆＃39; +＆＃39;的任何一方和＆＃34; - ＆＃34;这是为了确保正面和正面的价值观正确起作用，为了保持连续性，这种做法应适用于＆＃39; /＆＃39;和＆＃39; *＆＃39;。我确定有人会确认执行顺序，从内存中它将是+， - ，x，/。 Calc（）具有基本功能，没有＆＃39; auto＆＃39; !! 期待一些限制。只要给它一点！

以图像为中心的水平规则

5 个答案: