Css 以水平线为中心的图像

我如何用css将图像放置在一行中，就像我附加的图像一样？

谢谢各位:

我已经试过了，但是我对html不太确定，因为当我只使用hr标记时，行不会显示出来，只有图像

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

使用

style=“垂直对齐：中间”

将线中心设置为图像

div{
利润率：20px0；
高度：10px
}
img{
高度：50px；
边际上限：0px；
宽度：25px；
}

不支持浏览器。。
不支持浏览器。。

您可以使用带有

hr

标记或

div

标记的伪元素来执行此操作

hr

具有更多的语义值

您可以通过相对定位元素来实现这一点，从而使其溢出可见。然后设置颜色和边框颜色

然后，创建一个绝对定位的伪元素，元素顶部为当前行高度的负1/2。这会将一半元素移到直线上方，一半元素移到直线下方。这是因为假定图元没有高度。在定位元素的顶部之后，我们将元素的左侧移动到线条宽度的50%。然后，使用

左边距

，将元素向后移动一半宽度。这会将伪元素的中心精确定位在线条宽度的一半处

最后，设置伪元素的背景图像，并修复浏览器呈现

hr

标记的方式，并将边框应用于

div

（如果选择使用

div

方法）

/*相对定位父对象。设置溢出颜色和边框颜色的可见性*/
.幻想{
位置：相对位置；
溢出：可见；
边框颜色：金色；
颜色：金色；
}
/*添加一个包含图像的伪元素*/
1.想象一下{
内容：“；
位置：绝对位置；
显示：块；
顶部：-0.5em；
宽度：16px；
高度：16px；
左：50%；
左边距：-8px；
背景：url（“http://i.imgur.com/nceI30v.png");
背景重复：无重复；
背景色：白色；
背景尺寸：包含；
外形：3倍纯白；
}
/*如果选择使用div，请设置边框颜色*/
花式跳水{
边框底部：1px实心；
}
/*如果我们选择使用HR，请将边框设置为实心*/
人力资源部{
边框样式：实心；
}

试试这个

都是CSS：

hr.img-style{
边缘顶部：2米；
填充：0；
边界：无；
边框顶部：中双色#333；
颜色：#333；
文本对齐：居中；
}
hr.img风格：之后{
内容：网址(https://media-touchdown.cursecdn.com/avatars/21/363/635430233878910345.png);
显示：内联块；
位置：相对位置；
顶部：-0.7em；
字号：1.5em；
填充：0.25em；
背景：白色；
高度：60像素
}

---

欢迎来到这里！在这个网站上，你应该尝试自己编写代码。之后，如果你有问题，你可以张贴你已经尝试了一个明确的解释什么是不工作，并提供一个解决方案。我建议你读一个好的问题和答案。另外，请务必阅读。编辑您的问题以包含代码是否有办法使线条更细？您可以使用

边框宽度

属性更改线条的宽度。