How To Get Circle Image Between
Tag Like Tumblr In HTML? [closed]


Tags: javascript,html,css3

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>


    CSS Howto..

    How do I make a Javascript alert display only once, ever? [closed]

    How to change column display order mobile/tablet view CSS Wordpress?

    How to keep the navbar fixed to top in big screens only using jquery

    How to make my delete buttons responsive and stay absolute on my thumbnails

    How is the scroll effect achieved in this webpage?

    How to download CSS file through JQuery

    How to align social like buttons next to copyright text inside footer?

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to add CSS reference link to local HTML files in folder?

    css transition effects on show/hide element using css3 [duplicate]

    How to exclude an HTML element form Ionic CSS

    How do I style a different border?

    How do I to adjust the identation [closed]

    How to read CSS property of Psuedo class in javascript

    How to make gradual colour change when hover with CSS?

    How can I reload css styles when change windows width?

    How to add a border bottom like the image?

    How to change the size of the radio button using CSS?

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    How to change order of elements inside tables?

    How to prevent left “post” section from dropping off?

    How to apply CSS to buttons?

    How to get content of a specific css column

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to apply CSS style which will be ignored for tfoot or last TR

    How to (and how not to) load a css file that uses @font-face

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to rotate image in relation to mouse position?

    How to make a resizable menu centered on the middle?

    How to persist CSS changes with Chrome Developer Tools