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;
}

see fiddle here

问题在于我希望我的表单以页面为中心。如何以浮动元素为中心（或者如何在不浮动的情况下对齐）？

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

Answer 1

请在此处查看更新的小提琴：http://jsfiddle.net/XpjYJ/7/

我把你的html放在div中。然后我给div一个固定的宽度，并将边距设置为margin: 0 auto;

Answer 2

对包含表单元素的内容（可能是表单）的左边距和右边距使用auto。

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

如果没有宽度规格，表单将是其容器宽度的100％。黑色边框让您可以轻松查看正在发生的事情。

An updated fiddle

Answer 3

您可以将表单放在中心容器中。

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

示例here

Answer 4

这可能有所帮助：

<强> HTML：

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

<强> CSS：

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

如何使表单居中

4 个答案: