Html 如何将这些左/右对齐的标签和表单输入页面居中？

我有（JSFIDLE链接）的标签和文本输入

如何把整个东西放在页面中间？

我试着将它们包装成一个div，并将其设置为与cetner对齐-完全没有达到我的预期

任何帮助都比你感激

参考代码：

<div>
<div class="left">
    label
</div>
<div class="right">
    input element
</div>
</div>



<div>
<div class="left">
    another label
</div>
<div class="right">
    another input element
</div>
</div>

//align the labels and input nicely

.left {
    width: 20%;
    float: left;
    text-align: right;
}
.right {
    width: 65%;
    margin-left: 10px;
    float:left;
}

标签
输入元素
另一个标签
另一个输入元素
//对齐标签并正确输入
.左{
宽度：20%；
浮动：左；
文本对齐：右对齐；
}
.对{
宽度：65%；
左边距：10px；
浮动：左；
}

如果要使用float，则需要将整个内容包装在一个DIV中，并应用

边距：0 auto


在这种情况下，我会这样做：

<style>
.field {
    width: 80%;
    margin: 0 auto; 
}
.left {
    width: 20%;
    text-align: right;
    display: block;
    float: left;
    margin-right: 5%;
}
</style>

<div class="field">
   <label class="left">label</label>
   <input type="text">
</div>

<div class="field">
   <label class="left">another label</label>
   <input type="text">
</div>


.场{
宽度：80%；
保证金：0自动；
}
.左{
宽度：20%；
文本对齐：右对齐；
显示：块；
浮动：左；
保证金权利：5%；
}
标签
另一个标签
如果要使用float，则需要将整个内容包装在一个DIV中，并应用
边距：0 auto


在这种情况下，我会这样做：

<style>
.field {
    width: 80%;
    margin: 0 auto; 
}
.left {
    width: 20%;
    text-align: right;
    display: block;
    float: left;
    margin-right: 5%;
}
</style>

<div class="field">
   <label class="left">label</label>
   <input type="text">
</div>

<div class="field">
   <label class="left">another label</label>
   <input type="text">
</div>


.场{
宽度：80%；
保证金：0自动；
}
.左{
宽度：20%；
文本对齐：右对齐；
显示：块；
浮动：左；
保证金权利：5%；
}
标签
另一个标签
将整件事包装在一个div中并设置

         margin: auto;

如果要使用
文本对齐：居中
方法，该方法应应用于要居中的div的父项。
将整个内容包装在一个div中并设置

         margin: auto;

如果要使用
文本对齐：居中方法，应该应用于要居中的div的父级。
为什么不使用标记？@tgormtx:我不知道，这有什么帮助？为什么不使用标记？@tgormtx:我不知道，这有什么帮助？对于边距：0自动；要工作，需要在元素上设置宽度。任何时候使用float，都会失去均匀居中的灵活性。您必须定义包装的宽度并使包装居中；要工作，需要在元素上设置宽度。任何时候使用float，都会失去均匀居中的灵活性。您必须定义包装的宽度并使包装居中。