使表单居中，但保持其内容对齐

Question

我有一个三栏的页面。每列都是一个div，具有以下样式：

.Row1 {
    text-align:center;
    display:inline-block;
    vertical-align:top;
    padding:0.5%;
    width:31.5%;
}

HTML如下：

<div class="Row1">
    <h2>Header</h2>
    <br />
    <form>
        Form stuff goes here
    </form>
</div>

我的表单只由一个文本字段、几个单选按钮和一个提交按钮组成。问题是，将表单放到上面的代码中会得到一个居中的表单，文本字段、单选按钮和提交按钮也会居中对齐。

我想要做的就是将表单本身居中(作为一个容器)，但是保持所有的东西都向左对齐。

我曾尝试将表单包装在文本居中对齐的div中，并将表单样式设置为左对齐，但这不起作用。自动边距的事情也不起作用，无论是在包装div上，还是在表单上，没有包装div (即，一个额外的div。Row1目录始终保留)。

编辑：http://jsfiddle.net/pJwqe/

Answer 1

text-align不是‘对齐’div或表单的属性；相反，正如它所说的，它对齐文本。如果你想将一个块级元素居中，你必须使用空白区。将单个元素居中带边距的默认方法是将其设置为margin: 0px auto 0px;。

如果你想要一个有3列的布局，我宁愿你想要像this这样的布局。您可以通过设置margin-left或margin-right来设置div的边距，然后使用高级选择器设置第一个/最后一个元素的样式(这样第一个元素就不会有左边距，最后一个元素就不会有右边距)。

如您所见，表单现在居中，但其内容不居中。(您需要为表单提供宽度，否则，如果表单包含内容，则默认情况下表单将填充包含块)。

注意:它可能与您代码的其余部分相关，但在此测试用例中，vertical-align什么也不做。

Answer 2

希望这个fiddle link能为你工作。我在css中做了以下更改

.midAlign form {
border: 1px solid #C2C3C0;
margin: 0 auto;
padding: 10px;
width: 155px;
}