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中，并且表单样式设置为left align，但是没有用。无论是在包装div上还是在表单上，自动边距事物都不起作用，没有包装div（即一个额外的div。Row1 div总是保留）。

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