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

Question

我有这组标签和文本输入（JsFiddle 链接）。

如何将整个内容置于页面中间？

我尝试将它们包装在一个 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;
}

Answer 1

如果要使用浮点数，则需要将整个内容包装在 DIV 中并应用margin: 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>

Answer 2

将整个东西包装在一个 div 中并设置

         margin: auto;

还设置一个宽度，如果要使用该text-align: center;方法，则应将其应用于要居中的 div 的父 pf。