Question

我有一个基本的HTML表单，我正在集中。我正在使用jQuery插件来动态验证字段是否必需。当它在文本框后添加“Field is required”消息时，它会导致表单/表因其位于表中而移位。这是有道理的。

我的问题是保持表格/表格在页面中心的最佳方法是什么，但是允许在文本框“之后”添加的任何动态添加的元素不会移动表单？请参阅我的示例：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，然后调整第一个虚拟列的大小。另请注意，您需要在窗口调整大小事件上再次调整整个内容。

Answer 2

尝试将此添加到您的CSS：

 label{
    display:block;
  }
  td{
    vertical-align:top;
  }

Answer 3

我所做的就是设置动态添加到绝对值的错误的标签类。这样我仍然可以使用CSS将表单置于中心位置。

中心表单动态添加元素保留中心？

3 个答案: