我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃.
我想要实现这个目标：
基本上水平的规则,在它之间有一个装饰 – 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的中心….任何帮助或指针将不胜感激.
解决方法
@H_301_23@ 更改标记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元素具有水平重复的合适背景图像.背景图像将是与整个页面背景颜色相同但在中间具有水平线的片段.
