Can't get very small divs to center - html

Question

Example: http://jsfiddle.net/nDWRm/4/
I want to make a plus and minus button using css or text or svg.
I tried this with the css and using textual + and - signs, but found those never line up. The problem is I can get it to look reasonably good on 100% zoom but when the zoom changes the left and top values also need to change to get the divs to center again. I haven't tried svg yet. I was just wondering why this doesn't seem possible.
css
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
}
.vert{
top: 0.25em;
left: 0.65em;
position:absolute;
width: 0.3em;
height: 1.1em;
background-color: #424A49;
display: block;
}
.horz{
top: 0.65em;
left: 0.25em;
position:absolute;
width: 1.1em;
height: 0.3em;
background-color: #424A49;
display: block;
}
html
​
<div id="container">
<div class="vert"></div>
<div class="horz"></div>
</div>​
Using a monotype font I made this fiddle:
http://jsfiddle.net/nDWRm/17/
if you change the font-size of #container2 to for example 5em you'll see it not render correctly. And on a aesthetic note the + sign has rounded corners and the - doesn't, which is not very pleasing :P.
this fiddle shows the problem with a font very clearly: http://jsfiddle.net/nDWRm/25/

Answer 1

You can't just use random EM values. You have to calculate them on order to be translated to a round pixel value by the browser:
http://jsfiddle.net/meo/p7WMW/
(of course you can to it without scss, just by using http://pxtoem.com/ for example)
On js fiddle the base font size is 16px. So you need that in order to calculate your EM values.
scss
$base-font-size: 16px;
#function px2em($px, $contextPXSize : $base-font-size ){
#return ( $px / $contextPXSize ) * 1em;
}
a {
position: relative;
display: block;
margin: 2em;
width: px2em(40px); height: px2em(40px);
background: rgba(0,0,0,.1);
outline: 1px solid #000;
&:after, &:before {
content: "";
position: absolute;
background: black;
left: 50%; top: 50%;
}
&:after {
height: px2em(30px); width: px2em(4px);
margin: px2em(-15px) 0 0 px2em(-2px);
}
&:before {
height: px2em(4px); width: px2em(30px);
margin: px2em(-2px) 0 0 px2em(-15px);
}
&:hover:after {
display: none;
}
}
what would result in:
css
a{
position:relative;
display:block;
margin:2em;
width:2.5em; height:2.5em;
background:rgba(0, 0, 0, .1);
outline:1px solid #000
}
a:after,a:before{
content:"";
position:absolute;
background:#000;
left:50%; top:50%
}
a:after{
height:1.875em;
width:.25em;
margin:-.938em 0 0 -.125em
}
a:before{
height:.25em;
width:1.875em;
margin:-.125em 0 0 -.938em
}
a:hover:after{
display:none
}
​

Answer 2

You can use a Monotype font like Courier and a display switch in jQuery to get the effect you're after. Also using line height and text-align: center; on the text to get this to work in mulitple zooms. The inner divs use 100% height and width so will always fill the container. No positions are needed, and you can increase the font size to make the symbols bigger :)
CSS:
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
font-family: Courier;
}
.vert,
.horz{
margin: 0 auto;
width: 100%;
height: 100%;
color: #424A49;
text-align: center;
line-height: 1.5em;
}
.vert
{
display: none;
}
​
http://jsfiddle.net/Kyle_Sevenoaks/nDWRm/13/