Center a span inside a label

May 4, 2022

I’m trying to make a radio button with custom style.
This is the html/css I have so far and the problem is that the span, which should be the new checkmark, is not centered inside the label:

.custom-radio-btn{
  width: 50px;
  height: 50px;
  border: 5px solid #500357;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
}

.custom-radio-btn input{
  display: none;
}

.custom-radio-btn .checkmark{
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border-radius: 50%;
  background-color: #b406c4;
  display: none;
}

.custom-radio-btn input:checked + .checkmark{
  display: block;
}

<html>
  <body>
    <label class="custom-radio-btn">
      <input type="radio" name="sample">
      <span class="checkmark"></span>
    </label>
  </body>
</html>

>Solution :

I changed the css rule .custom-radio-btn .checkmark as follows:

  /*changed the offset to 4px instead of 5px*/
  width: calc(100% - 4px);
  height: calc(100% - 4px);

  /*added margin to better center the mark*/
  margin-top: 2px;
  margin-left: 2px;

This is the demo with such mod:

.custom-radio-btn{
  width: 50px;
  height: 50px;
  border: 5px solid #500357;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
}

.custom-radio-btn input{
  display: none;
}

.custom-radio-btn .checkmark{
  /*changed the offset to 4px instead of 5px*/
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  background-color: #b406c4;
  display: none;
  
  /*added margin to better center the mark*/
  margin-top: 2px;
  margin-left: 2px;
}

.custom-radio-btn input:checked + .checkmark{
  display: block;
}

<html>
  <body>
    <label class="custom-radio-btn">
      <input type="radio" name="sample">
      <span class="checkmark"></span>
    </label>
  </body>
</html>