Creating a line with circle in the middle

Question

So, I'm trying to achieve this result:

This is what I got when I tried: https://jsfiddle.net/wvdkmjge/

 .container { width: 100px; height: 1px; background-color: black; } .circle { display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: transparent; border: solid 1px black; border-radius: 50%; } 

 <div class="container"> <div class="circle"> </div> </div> 

Moreover, I want that I'll not see the border line on the circle. Any suggestions?

Answer 1

A small amendment to your code to position the elements and you get the effect you want to achieve.

 .container { width: 100px; height: 1px; background-color: black; position: relative; } .circle { display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: white; border: solid 1px black; border-radius: 50%; position: absolute; top: -6px; left: calc(50% - 5px); } .blue { margin-top: 20px; background: #3EB2EF; } .blue .circle { background: #3EB2EF; border-color: #3EB2EF; } 

 <div class="container"> <div class="circle"> </div> </div> <div class="container blue"> <div class="circle"> </div> </div> 

Answer 2

If you want to position an element depending on its parent, use position:relative for the parent and then add position relative or absolute to the child. to center something in the middle, use margin:0 auto and if it has absolute positioning also add left:0; right:0; left:0; right:0;

https://jsfiddle.net/azizn/e4ev3awj/1/

 .container { width: 100px; height: 1px; background-color: blue; position:relative; } .circle { display:inline-block; width: 10px; height: 10px; position: absolute; background:blue; left:0; right:0; margin:0 auto; border-radius: 100%; top:-4px; } 

 <div class="container"> <div class="circle"> </div> </div> 

Answer 3

a bit late to answer, but this looks like a typical <hr/> that needs some makup.

 /* restyle however your needs are hr and its pseudo elements , here only one is used */ hr { color: turquoise; border-width: 3px; margin: 1em; box-shadow: 0 0 5px gray; } hr:before { content: ''; border-radius: 100%; position: absolute; height: 20px; width: 20px; background: turquoise; left: 50%; margin: -10px; box-shadow: inherit } 

 <hr/> 

Answer 4

Try this:

 .container { width: 100px; height: 1px; background-color: black; position: relative; } .circle { position: absolute; top: -5px; left: 50%; margin-left: -5px; display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: transparent; border: solid 1px black; border-radius: 50%; } 

 <div class="container"> <div class="circle"> </div> </div> 

Answer 5

Fiddle

This uses a lot of different codes then above.

class:before and class:after

Hope this helps you!