Im having trouble using em's to center a custom radio button "tick" at the center of its parent.
It works well using px, but em's fail to center uniformly at certain sizes. It misplaces the content by a few pixels and sometimes it seems quite random. E.g if i reload the page without changing anything in styles, it may sometimes render it correctly, and other times incorrectly.
Below is a fiddle that demonstrates the issue. ( toggle ems/pixels and change the size to see the problem )
<body>
<div id="parent">
<div id="child"></div>
</div>
<input type="button" id="toggle" value="toggle em vs px"/>
<input type="button" id="bigger" value="increace size"/>
<input type="button" id="smaller" value="decrease size"/>
</body>
body {
font-size: 10px;
}
#parent {
width: 32px;
height: 32px;
border: 2px solid rgb(37, 177, 172);
border-radius: 20px;
background: white;
margin: 20px;
}
#child {
width: 24px;
height: 24px;
margin: 4px;
background: rgb(37, 177, 172);
border-radius: 10px;
}
#parent.em {
width: 3em;
height: 3em;
border: 2px solid rgb(37, 177, 172);
background: white;
margin: 20px;
border-radius: 2em;
}
#parent.em #child {
width: 2em;
height: 2em;
margin: 0.46em;
background: rgb(37, 177, 172);
border-radius: 2em;
}
var size = 10;
$(document).ready(function() {
$("input#toggle").click(function() {
$("#parent").toggleClass("em");
});
$("input#bigger").click(function() {
size++;
$("body").css("font-size", size);
});
$("input#smaller").click(function() {
if ( size > 1 ) {size--;}
$("body").css("font-size", size);
});
});
Is there anything i could do to keep using em's and be sure it will always display evenly.
Aucun commentaire:
Enregistrer un commentaire