How To Get Circle Image Between

---

Tag Like Tumblr In HTML? [closed]

Problem :

I used to own a Tumblr blog and I was able to have an image in the middle of the split between where the header image and the body of the page was but now I'm using HTML, how would I do something like that? I've Googled a lot of different things and I can't find anything, someone even tried telling me I could just do:

<hr><img src="http://www.examplelink.com/sampleimage.png" /></hr>

But obviously it didn't work so what I'm looking for (was looking for before this edit) is something like this:

<hr /><img src="http://www.examplelink.com/sampleimage.png" class="A" />

Then the CSS:

.A{position:center;border:solid 3px black;border-radius:100%;}

So that it would make like a circle around the image and place it in the center of the hr.

[Note: THIS HAS ALREADY BEEN SOLVED BY SOMEONE, I JUST HAD TO EDIT THIS BECAUSE IT WAS UNCLEAR. I HOPE IT'S CLEAR NOW!]

Solution :

Basic idea with CSS after

hr.img:after {
    content: "";
    width: 48px;
    height: 48px;
    background: url("http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/48x48/sun.rays.small.png") no-repeat;
    display: inline-block;
    position: absolute;
    margin-top: -24px;
    margin-left: -24px;
    left: 50%;
}

<p>This is some text>/p>
<hr class="img"/>
<p>This is some text>/p>