Center a span inside a label-CodePudding

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 >
      <input type="radio" name="sample">
      <span ></span>
    </label>
  </body>
</html>

CodePudding user response：

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 >
      <input type="radio" name="sample">
      <span ></span>
    </label>
  </body>
</html>

CodePudding user response：

I change your height and width then put a margin on it.

.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: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #b406c4;
  display: none;
  margin:2.5px auto;

}

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

<html>
  <body>
    <label >
    <input  type="radio" name="sample">
   <span > </span>
    </label>
    
  </body>
</html>