How do I vertically center a circle on a line?

Ask a question
2

I’m trying to center a circle vertically in the middle of a horizontal line, but using a negative margin doesn’t seem to work. How should I approach this?

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  margin-left: 50%;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
}
<div id="Value">0.33</div>
<div id="Result"></div>


<div id="line">
  <div id="circle">
    2
  </div>
</div>
offer bounty
add comment

0 Answer

Your Answer