Question

我一直在努力,从理论上讲,在几天内,这应该非常简单......我决心不放弃。

I am trying to achieve this:

“entergraph

从根本上说,横向规则,在相互之间加节――人权原则将涵盖全部屏蔽。

So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a

centered but failing miserably.

我的标志:

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

CSS:

hr{

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

iii

我只想说明如何使形象出现在人权的中心。欢迎任何帮助或点人。

Answer 1

2. 改变标记编号

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

在风格表中添加以下内容,将16px替换成适当价值,取决于图像的高度和预期的字体大小。

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

然而,一种更好的做法是,只使用一个以<代码>div为核心的图像,该图像具有适当的背景形象,横向重复。背景图像将与整个页面背景相同,但中线相同。

Answer 2

你们也可以用安全局的假件来做到这一点。全部需要的是<代码><hr>。

hr:after { 
    background: url( yourimagehere.png ) no-repeat top center;
    content: "";
    display: block;
    height: 30px; /* height of the ornament */
    position: relative;
    top: -15px; /* half the height of the ornament */
}

Answer 3

http://jsfiddle.net/9EFdF/“rel=“nofollow”>this fiddle。您可在<代码>div和ornament等栏目上确定矿石的图像。

Answer 4

off the cuff... using the center image for the hr and a repeated line segment for the div...

    <style>
      .line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
      .line {background: url(as_line.jpg) center repeat-x;}
    </style>

    <div class="line"><hr></div>

友情链接