Center large html elements

by Simon Hi

HTML

<div id="A"><!--
--><span>A</span><!--
--><span>B</span><!--
--><span>C</span><!--
--><span>D</span><!--
--><span>E</span><!--
--><span>F</span><!--
--><span>G</span><!--
--><span>H</span><!--
--><span>I</span><!--
--><span>J</span><!--
--></div>

CSS

#A
{
	font-size:3em;
	margin:0 auto;
	background:green;
	padding:0.125em;
}
#A span
{
	display:inline-block;
	background:yellow;
	width:2em;
	margin:0.125em;
	padding:0;
	text-align:center;
}

JavaScript

function getStyleInPx(e,p)
{
	return parseFloat(window.getComputedStyle(e,null)[p]);
}
function magic()
{
	var a,p,x,wa,wp,wx,b,n,mbpa;
	a=document.getElementsByTagName("div")[0];
	mbpa=getStyleInPx(a,"marginLeft")+getStyleInPx(a,"marginRight");
	mbpa+=getStyleInPx(a,"borderLeftWidth")+getStyleInPx(a,"borderRightWidth");
	mbpa+=getStyleInPx(a,"paddingLeft")+getStyleInPx(a,"paddingRight");
	p=a.parentNode;
	wp=getStyleInPx(p,"width");
	x=document.getElementsByTagName("span")[0];
	b=x.getBoundingClientRect();
	wx=b.width+getStyleInPx(x,"marginLeft")+getStyleInPx(x,"marginRight");
	wa=Math.floor((wp-mbpa)/wx)*wx;
	a.style.width=wa+"px";
}
setInterval(magic,1000);