Question

我有this set（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;方法，

也设置一个宽度，该方法应该应用于父pf，div要居中。

如何将这些左/右对齐标签和表格输入中心页面？

2 个答案: