如何使表格居中

Question

我有一个简单的表单...

<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">

这是到目前为止的 CSS；输入元素根据需要垂直排列。

<div>
    <label>name</label>
    <input type="text" id="name">
</div>
<div>
    <label>email address</label>
    <input type="text" id="email">
</div>

div
{
    padding: 5px;    
}
label
{
    display: block;
    width: 100px;
    float: left;
}

请参阅此处的小提琴

问题是我希望我的表单在页面上居中。如何使浮动元素居中（或者如何在不浮动的情况下对齐）？

必须适用于所有浏览器，包括 IE6。

Answer 1

请参阅此处更新的 Fiddle： http://jsfiddle.net/XpjYJ/7/

我将您的 html 放入其中一个分区。然后我给 div 一个固定的宽度，并将边距设置为 margin: 0 auto;

Answer 2

使用 auto 作为包含表单元素（大概是表单）的左右边距。

form {
    width: 80%;
    border: solid black 1px;
    margin-left: auto;
    margin-right: auto;
}

如果没有宽度规范，表单将是其容器宽度的 100%。黑色边框可以让你很容易看到发生了什么。

更新的小提琴。

Answer 3

您可以将表单放入居中的容器中。

在这种情况下，表单元素向左（或向右）浮动，您只需在容器上应用水平定位。

示例此处

Answer 4

这可能会有所帮助：

HTML：

<div>
<form>
<label>bla</label>
<input />
...
</form>
</div>

CSS：

div {margin:0 auto;}
form {width:200px;}
input {float:right;}