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

【问题标题】：Centering a form, but maintaining alignment of its contents使表单居中，但保持其内容的对齐
【发布时间】：2013-06-28 01:28:26
【问题描述】：

我有一个三栏页面。每列是一个具有以下样式的 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 div 始终保留）。

【问题讨论】：

【解决方案1】：

text-align 不是“对齐”div 或表单的属性；相反，正如它所说，它对齐文本。如果要使块级元素居中，则必须使用边距。使用边距居中单个元素的默认方法是将其设置为，例如对于顶级容器，设置为 margin: 0px auto 0px;。

如果你想要一个 3 列的布局，我宁愿认为你会想要像 this 这样的东西。您可以通过设置 margin-left 或 margin-right 设置 div 的边距样式，然后使用高级选择器设置第一个/最后一个元素的样式（因此您的第一个元素没有左边距，也没有右边距你的最后一个）。

如您所见，表单现在居中，但它们的内容不是。（你需要给你的表单一个宽度，否则如果它们有内容，它们将默认填充包含块）。

注意：它可能与您的其余代码相关，但在这个测试用例中 vertical-align 什么都不做。

【讨论】：

jsbin.com/esotic/7 如果你看这里，表单容器居中，但输入仍然在左边。我希望它们位于中心，但它们的左侧全部对齐（而不是它们的中心点对齐）。我不确定这是否有意义。
兄弟，但这没有意义。除非您重新发明某种邪恶的数学系统，否则您不能将两个不同长度的块放在最左边的中心。但是，您可以放置一个对所有人都相同的“缩进”。这是一个更新的示例：jsbin.com/esotic/10/edit（仅适用于中间形式）。做input {margin-left: [formwidth(100%)-longestInputWidth(80%)]/2(=10%)}。这是你能得到的最接近你想要的东西。

【解决方案2】：

希望这个fiddle link 对你有用。我在你的 css 中做了以下更改

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

【讨论】：