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 to change SVG color (when using the SVG as background in CSS)

    How do I investigate a “style sheet could not be loaded” message in Firefox?

    Show a box on top of an image in an HTML page

    How do I use CSS to centre this content?

    How can I add flashing effect to an option tag?

    How use hash tag (“a name”) to go to spot on page but account for a fixed element at top?

    How to display heading and paragraph elements inline in css?

    How to Change Style of Parent
  • on Hover
  • How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    How do I get a computed style?

    How to adjust toaster popup width

    cannot figure out how to make text appear inside div after hover animation

    How can I render country flags as a ribbon, using CSS only?

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How to align with digits inside to the right, jQuery

    How to make CSS background-image responsive? [duplicate]

    How can I apply a CSS modification with a button [closed]

    new google images how do they float correctly

    Chrome (webkit?) not displaying images correctly in a slideshow

    diagonal lines as background for css - how to switch angle

    How to set a default location of a scrollbar

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How can I mark it up? [closed]

    How to resize two divs on the click of a link

    jQuery slideDown() moves everything below downwards. How to prevent this?

    CSS select: how to count and select child of a specific class only?

    How to align text vertical CSS

    how to position these CSS elements without defining height and width

    How to have a common header and footer in a HTML CSS web app?

    How to auto margin-left for the message bar