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

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 div 始终保留）。

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

希望这个小提琴链接对你有用。我在你的 css 中做了以下更改

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

2 回答 2