Question

如何将图像放在带有css的行中，就像我附加的图像一样？ Horizontal line with centered image

谢谢你：

我试过这个，但是我不确定html，因为当我只使用hr-tag而只使用图像时，该行不显示。

hr {
    border: 0;
    background: url(//xxx/ornament01.png) center center no-repeat;
    background-size: auto auto;
    background-size: 33px auto;
    position: relative;
    margin: 15px auto 30px;
    height: 26px;
}

hr::before {
    margin-right: 24px;
    right: 50%;
}

hr::after, hr::before {
    background: #c0b4a5;
    height: 1px;
    position: absolute;
    top: 50%;
    width: 1000px;
}

Answer 1

使用style="vertical-align:middle"将线条中心设置为图像。

＆＃13;

div{
margin:20px 0 0 0;
height:10px
}
img{
height:50px;
margin-top:0px;

width:25px;
}

＆＃13;

<div>
<svg height="10" width="100">

  <line x1="10" y1="10" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" />
  browser not supported..
</svg>
<img style="vertical-align:middle" src=https://www.w3schools.com/css/paris.jpg><svg height="10" width="100">

  <line x1="10" y1="10" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" />
  browser not supported..
</svg>
</div>

＆＃13;

Answer 2

您可以使用带有hr标记或div标记的伪元素执行此操作。 hr具有更多的语义价值。

您可以通过将元素相对定位来实现此目的，使其溢出可见。然后设置它的颜色和边框颜色。

然后，创建一个绝对定位的伪元素，元素的顶部为负当前行高的一半。这将一半移动到线上方，将一半元素移动到线下方。这是有效的，因为假设元素没有高度。在定位元素的顶部之后，我们将元素的左侧移动到线的宽度的50％。然后，使用margin-left，将元素移回其一半的宽度。这使伪元素的中心恰好位于线宽的一半处。

最后，设置我们的伪元素的背景图片，并修复浏览器呈现hr标签的方式，并将边框应用于div（如果您选择使用div方法。）

＆＃13;

/* Position the parent relative. Set visibility of overflow and border colors. */
.fancy {
  position: relative;
  overflow: visible;
  border-color: gold;
  color: gold;
}

/* Add a pseudo element that contains our image. */
.fancy:after {
  content: " ";
  position: absolute;
  display: block;
  top: -0.5em;
  width: 16px;
  height: 16px;
  left: 50%;
  margin-left: -8px; 
  
  background: url("http://i.imgur.com/nceI30v.png");
  background-repeat: no-repeat;
  background-color: white;
  background-size: contain;
  outline: 3px solid white;
}

/* If we choose to use a div, set the border color. */
div.fancy {
    border-bottom: 1px solid;
}

/* If we choose to use an HR, set the border to be solid */
hr.fancy {
  border-style: solid;
}

＆＃13;

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

＆＃13;

Answer 3

试试这个

这都是CSS：

hr.img-style {
  margin-top: 2em;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.img-style:after {
  content: url(https://media-touchdown.cursecdn.com/avatars/21/363/635430233878910345.png);
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
  height: 60px
}

<hr class="img-style" />

图像以水平线为中心

3 个答案: