DIV 垂直居中问题的修正,CSS、DIV

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV 垂直居中问题的修正</title>
<meta name="Author" content="Alz(Analyze),QQ:25644652,QQ群:7210746" />
<script type="text/javascript">
<!--
/**
 * 修正 DIV 的垂直居中问题，通过在 HTML 代码中的 valign 属性起作用
 * @author Alz
 * @version 1.00
 * @date 2007-9-18
 */
function vAlign_fixed(){
	var divs = window.document.getElementsByTagName("div");
	for(var i = 0; i < divs.length; i++){
		if(/^(?:middle|center)$/.test(divs[i].getAttribute("valign"))){  //如果需要垂直居中
			var h = divs[i].offsetHeight;
			var nodes = divs[i].childNodes;
			for(var j = 0; j < nodes.length; j++){
				if(nodes[j].nodeType != 1){
					if(nodes[j].nodeType == 3)  //TEXT_NODE
						divs[i].removeChild(nodes[j]);  //顺便移除多于的文本结点
					continue;
				}
				nodes[j].style.position = "relative";
				nodes[j].style.top = Math.floor((h - nodes[j].offsetHeight) / 2) + "px";
			}
		}
	}
}
window.onload = function(){
	vAlign_fixed();
};
//-->
</script>
</head>
<body>
<div style="height:50px;width:100px;font-size:12px;text-align:center;background-color:#EEEEEE;" 

valign="middle">
<a href="#"><img align="absbottom" src="" width="16" height="16" border="0" />123123</a>
</div>
<div style="height:50px;width:100px;font-size:12px;text-align:center;background-color:#DDDDDD;" 

valign="center">
<a href="#"><img align="absbottom" src="" width="16" height="16" border="0" />123123</a>
</div>
<div style="height:50px;width:100px;font-size:12px;text-align:center;background-color:#CCCCCC;">
<a href="#"><img align="absbottom" src="" width="16" height="16" border="0" />123123</a>
</div>
</body>
</html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]