html – 带装饰的CSS

我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃.

我想要实现这个目标：

基本上水平的规则,在它之间有一个装饰 – HR将跨越屏幕的整个宽度.

所以我切片我的PSD将装饰作为图像丢弃 – 我试图将其叠加到一个居中但却失败的悲惨.

我的标记：

<div>
  <hr>
  <img src='assets/img/ornament.png' class='center'>
</div>

CSS：

hr{

height: 2px;
color: #578daf;
BACkground-color: #578daf;
border:0;

}

我只是想弄清楚如何使图像出现在HR的中心….任何帮助或指针将不胜感激.

<div class='hr'>
  <hr>
  <img src='assets/img/ornament.png' alt=''>
</div>

.hr {  text-align: center; }
.hr img { position: relative; top: -16px; }