垂直和水平居中 'div' 对象

• 下载 centering_div.zip - 5.0 KB

引言

垂直和水平居中 'div' 对象

我希望在一个父“div”层内垂直和水平居中一个“div”对象。我希望在不使用 HTML 表格的情况下实现这一点。我遇到的问题是，我不知道内部“div”对象的高度和宽度，因为它的内容（长文本）是动态生成的。我尝试了 CSS 属性“vertical-align: middle”，但似乎无法解决我的问题。我也尝试了许多其他使用 CSS 的方法，但都没有帮助，然后我编写了这个小段 Javascript 代码，轻松解决了我的问题。

这个解决方案的关键在于内部对象绝对定位在其父区域高度的一半处，然后向上移动其自身高度的一半。 同样，在其父区域宽度的一半处，然后向左移动其自身宽度的一半。

这个简单的 Javascript 将动态地将内部“div”对象对齐在其父层中央。您不需要知道内部“div”对象的高度和宽度。您可以动态地填充内容（通常是长文本）。此 Javascript 适用于 IE6.0、Opera 9.23、FireFox2.0.0.8 和 Netscape9.0b3。

Firefox 和 Netscape 不支持“pixel”属性，因此为了使代码在 FF 和 N 上工作，您需要使用 parseInt() 获取大小的数字部分，即不带“px”的大小。

下载代码后，替换以下行

//var a=Math.round(document.getElementById(Parent).style.pixelHeight/2);
//var x=Math.round(document.getElementById(Parent).style.pixelWidth/2);

为这些

var a=Math.round(parseInt(document.getElementById(Parent).style.height)/2);
var vax=Math.round(parseInt(document.getElementById(Parent).style.width)/2);

这是一个免费的 Javascript，分发希望它会很有用，但没有任何保证。

使用代码

只需将父“div”对象和子“div”对象传递给 Javascript 函数即可，就完成了。子“div”对象将放置在父“div”对象的中央。

运行附带的示例文件“centering_div.aspx”，其中包含完整的示例。

function AlignMiddle(Parent,Child) 
{ 
//Generate content dynamically
   document.getElementById(Child).innerHTML="Hello there, I am dynamically align in the middle using a Javascript."
//Center Vertically
   h = document.getElementById(Child).offsetHeight;
   //var a=Math.round(document.getElementById(Parent).style.pixelHeight/2);
   var a=Math.round(parseInt(document.getElementById(Parent).style.height)/2);
   var b=Math.round(h/2);
   var c=a-b;
   document.getElementById(Child).style.top=c+"px"; 
//Center Horizontally
   w = document.getElementById(Child).offsetWidth; 
   //var x=Math.round(document.getElementById(Parent).style.pixelWidth/2);
   var x=Math.round(parseInt(document.getElementById(Parent).style.width)/2);
   var y=Math.round(w/2);
   var z=x-y;
   document.getElementById(Child).style.left=z+"px";
}

历史

创建者：Muhammad Shoaib

创建于：2007-10-10