DOM元素垂直对齐JS算法

时间:2013-04-30 11:56:20

标签: javascript html css

我编写了以下脚本,它接受一个元素的子节点并使用CSS垂直对齐它们。 该脚本适用于我测试过的所有主流浏览器,IE除外。

由于我正在更改元素的位置值,因此设置容器对象的宽度和高度以及子项的顶部和左侧,一旦脚本完成,它们将出现在同一位置。 IE不能很好地处理offsetTop / offsetLeft。

保持容器的大小:

element.style.width = element.offsetWidth + 'px';
element.style.height = element.offsetHeight + 'px';

保持孩子的位置:

child.style.top = child.offsetTop + 'px';
child.style.left = child.offsetLeft + 'px';

孩子的对齐:

child.style.top = parent.offsetHeight / 2 - child.offsetHeight / 2 + 'px';

有什么想法吗?

也很乐意接受对算法的改进。

http://jsfiddle.net/barmatz/ZLnTx/

0 个答案:

没有答案