jquery - 居中表单动态添加元素保持居中？

Question

我有一个我正在居中的基本 HTML 表单。我正在使用 jQuery 插件来动态验证字段是否为必填项。当它在文本框后添加“需要字段”消息时，由于它在表格中，它会导致表格/表格移动。这是有道理的。

我的问题是，保持表格/表单在页面上居中但允许在文本框“之后”添加的任何动态添加的元素不移动表单的最佳方法是什么？在这里查看我的示例:http://jsbin.com/amasa4/3/

如果在保持相同样式的情况下更容易完成，我不一定需要它保留表格。

Answer 1

我现在使用的解决方案是使用 javascript 而不是 css (margin: 0 auto;) 将您的表格居中。我在某种模式对话框中有我的表单。所以我的案例的功能如下:

$.fn.center = function() {

    this.css("position", "absolute");

    this.css("left", "50%");

    this.css("margin-left", -((this.width()) / 2) + "px");

    return this;

}

是的，如果您的表单中有多个步骤，则每次转到下一步或上一步时都必须将表格居中。

这是 demo

编辑:我创建了以下 hack ，看起来真的很丑，但是如果你绝望并且没有其他解决方案你可以使用它=)我在那里所做的是在表单之前添加一个虚拟 div 并根据表单的宽度使用 javascript 调整它的大小。您可以使用 1 个表而不是 2 个 div，然后改为调整第一个虚拟列的大小。另请注意，您需要在窗口调整大小事件中再次调整整个内容的大小。