I have the following code:
.divCheckList .valorBool,
.divCheckList .divCheckBox {
height: 34px;
display: inline-block;
border:#CCC .1px solid;
vertical-align:middle;
}
.divCheckList .valorBool {
line-height: 34px;
}
.divCheckList .divCheckBox .checkBox {
display: none;
}
.divCheckList .labelCheckBox {
display:block;
width:60px;
height:34px;
background-color:#CCC;
border:none;
border-radius:34px;
}
.divCheckList .labelCheckBox:after {
display:block;
width:26px;
height:26px;
background-color:#FFF;
border:#000 .1px solid;
border-radius:50%;
content:"";
}
html
<div class="divCheckList">
<label class="valorBool">NÃO</label>
<div class="divCheckBox">
<input type="checkbox" name="cb" id="cb" class="checkBox">
<label for="cb" class="labelCheckBox"></label>
</div>
<label class="valorBool">SIM</label>
</div>
That shows the following image:
However,Iwouldliketocenterthewhiteballsothatitisspacedinthecornersandontop.
Itriedwithmargin:4px;
buttheimagedistorts.
How to fix?