11

So, I'm trying to achieve this result:

line with circle in the middle

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?

1
  • Nice one OP. You say I want that no border line on the circle, and add border: solid 1px black;
    – Max Payne
    Jan 24, 2016 at 9:48

5 Answers 5

12

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>

3
  • Exactly what I wanted. Thanks!
    – Web R
    Jan 23, 2016 at 22:01
  • Sure, I cant do it now, just more 4 minutes
    – Web R
    Jan 23, 2016 at 22:04
  • thanks for this elegant solution. How have you found " top: -6px;" please?
    – DiaJos
    Nov 19, 2019 at 13:00
5

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;

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>

5

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/>

1
  • Thats a better option. Why unnecessarily increase no of elements. <hr> seems semantically correct too here.
    – Max Payne
    Jan 24, 2016 at 9:52
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>

4

Fiddle

This uses a lot of different codes then above.

class:before and class:after

Hope this helps you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.