CODEWITHSUNDEEP
htmlcss
Jens
Jens

Reputation: 25

Center a circle on a line

I would like to center a circle on a line, like this:

enter image description here

I've got the following code:

.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}

.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;

.left {
width:200px;
height:100%;
position:relative;
}

<div class="Box">
    <div class="Left">
       <div class="circle">

       </div>
    </div>
    <div class="Right"></div>
</div>

However, when i resize the windows, it ends up like this:

enter image description here

How can i make sure the circle stays in place, even when i resize my window?

Upvotes: 0

Views: 687

Answers (2)

VXp
VXp

Reputation: 12058

You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:

.circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  right: -37.5px; /* modified / - half of the circle's width */
  top: 41px;
  background-color: #000;
}

.box {
  width: 500px;
  max-width: 100%; /* added / responsive */
  height: 150px;
  position: relative;
  border: 1px solid #eee;
}

.left {
  width: 200px;
  max-width: 100%; /* added / responsive */
  height: 100%;
  position: relative;
  border-right: 1px solid #eee; /* added */
}
<div class="box">
  <div class="left">
    <div class="circle">

    </div>
  </div>
  <div class="right"></div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272817

Another simply way to do this is using pseudo element like this :

.box {
  margin: 10px auto;
  max-width: 400px;
  border: 1px solid #000;
  text-align: center;
  position: relative;
}

.box:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: #000;
}

.cirle {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
  margin: 20px 0;
}
<div class="box">
  <div class="cirle"></div>
</div>

this part of the code will make sure the line will stay at the center: 

.box:before {
  left: 50%;
  margin-left: -0.5px;
}

Upvotes: 1

Related Questions