Question

I have been struggling with something which in theory should be very simple for a few days now… and i am determined not to give up.

I am trying to achieve this:

Essentially horizontal rule, with an ornament between – the HR will span the full width of the screen.

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.

My Markup:

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

CSS:

hr{

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

}

I just cant figure out how to make the image appear in the centre of the HR…. Any help or pointers would be appreciated.

Answer 1

Change the markup tp

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

Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.

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

However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.