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的中心….任何帮助或指针将不胜感激.

解决方法

更改标记tp

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

将以下内容添加到样式表中,将16px替换为适当的值,该值取决于图像的高度和预期的字体大小.

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

然而,更好的方法是仅使用图像,以div元素为中心,div元素具有水平重复的合适背景图像.背景图像将是与整个页面背景颜色相同但在中间具有水平线的片段.