CODEWITHSUNDEEP
htmlcss
3gwebtrain
3gwebtrain

Reputation: 15303

How to center a inner circle using css

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  position:relative;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

I am trying to create a filled circle with border, but getting not the fill properly centered. how to fix this?

Upvotes: 0

Views: 872

Answers (5)

Jesse
Jesse

Reputation: 3622

Another way to do this is by using Flexbox.

If you add the following to your parent:

display: flex;
align-items: center;
justify-content: center;

And remove the relative positioning from the child element, the child element will be centered inside the parent.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display: flex;
  align-items: center;
  justify-content: center;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Edit: If you encounter a problem with flexbox circles being squashed on smaller resolutions, try using min-height and min-width, and using margin: auto for centering instead of display: flex.

Upvotes: 4

sonam gupta
sonam gupta

Reputation: 785

Just Change the position to position:absolute in place of position:relative for child span span.child.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  align:center;
  position:absolute;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Upvotes: 0

yasarui
yasarui

Reputation: 6563

Just Changed the position:relative to position:absolute of span.child

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  position:absolute;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Upvotes: -1

Carl Binalla
Carl Binalla

Reputation: 5401

You can use position: absolute in child instead to center it

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

I also changed the value of left and top, and added transform:translate() to make sure it is always centered regardless of browser size

div.container {
  border: 1px solid red;
  position: relative;
}

span.parent {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 10px;
}

span.child {
  background: green;
  width: 80%;
  height: 80%;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Upvotes: -1

ankita patel
ankita patel

Reputation: 4251

Give left:0; to span.child class.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:0;
  top:10%;
  position:relative;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Upvotes: 0

Related Questions