html – 带装饰的CSS

概述我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃. 我想要实现这个目标： 基本上水平的规则,在它之间有一个装饰 – HR将跨越屏幕的整个宽度. 所以我切片我的PSD将装饰作为图像丢弃 – 我试图将其叠加到一个居中但却失败的悲惨. 我的标记： <div> <hr> <img src='assets/img/ornament.png' class='center'></div 我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃.

我想要实现这个目标：

基本上水平的规则,在它之间有一个装饰 – 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元素具有水平重复的合适背景图像.背景图像将是与整个页面背景颜色相同但在中间具有水平线的片段.

总结

以上是内存溢出为你收集整理的html – 带装饰的CSS全部内容，希望文章能够帮你解决html – 带装饰的CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。