CODEWITHSUNDEEP
css
veoveo
veoveo

Reputation: 75

Centering small element inside another element

I'm making carousel pagination, which should looks like circle with small circle inside. The problem is centring of inner circle, which is always just a little bit on the side.

I've tried a lot ways of centring via tranforms, margins, calc top & left etc..

div {
  height: 13px;
  width: 13px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: red;
  position: absolute;
  top: calc(50% - (8px / 2));
  left: calc(50% - (8px / 2));
  border-radius: 50%;
}
<div></div>

FIDDLE

I expect fully centered inner circle.

Upvotes: 3

Views: 70

Answers (3)

Chris W.
Chris W.

Reputation: 23290

Even divisible.

div {
  height: 12px;
  width: 12px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
<div></div>

Upvotes: 1

stacktome
stacktome

Reputation: 790

Change like this

 div {
      height: 16px;
      width: 16px;
      border: 1px solid black;
      border-radius: 100%;
      position: relative;
    }

div::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: red;
  position: absolute;
  top: calc(50% - (8px / 2));
  left: calc(50% - (8px / 2));
  border-radius: 50%;
}

Upvotes: 1

&#214;m&#252;rcan Cengiz
&#214;m&#252;rcan Cengiz

Reputation: 2159

Make your pixels a even numbers to centering correctly like this:

div {
  height: 14px;
  width: 14px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

Upvotes: 3

Related Questions