居中左对齐的表单元素答案

【问题标题】：Centering form elements with left alignment居中左对齐的表单元素
【发布时间】：2012-10-22 22:44:30
【问题描述】：

我想将表单中的元素居中而不移动文本或按钮以使其在左侧对齐。

所以它看起来像这样：

底部的方块应该是一个按钮。

我希望它居中，但 <center> 标签移动了文本和按钮，因此它们位于输入框的中心。

这是我的代码：

<form action="login.php" method="post">
    <div class="aside">
        <div id="center">
            Username:<br>
            <input type="text" name="username"><br>
            Password:<br>
            <input type="password" name="passwor"><br>
            <input type="submit" class="button" name="submit" value="Login"><br><br>
        </div>
    </div>
</form>

和css：

#center{
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

div.aside {
    margin-left: 15px;
    margin-top: 10px;
    width: 250px;
    background: #f5f5f5;
    border: 1px solid #e9e9e9;
    line-height: 150%;
}

div.aside .button{
    padding:3px;
    width: 50px;
    margin-top: 3px;
    background-color: #00A1E6;
    border: 1px solid #0184BC;
    text-decoration:none;
    color: #ffffff;
    text-align: center;
    -webkit-appearance: none;
}

【问题讨论】：

“浮动”样式没有这样的值“中心”。有效值为：“left”、“right”、“none”、“inherit”。 Source.
我知道，那是我正在试验的随机废话。我会及时删除。

标签： html forms text center

【解决方案1】：

您可以将父 div 设置为最大宽度，将子 div 设置为您的内容（左对齐，宽度更小），并使用 margin-left:auto;margin-right:auto; 将子 div 置于父元素的中心。但是，如果这样做，则需要设置子 div 的宽度。

jsFiddle

【讨论】：

我不希望它在页面中间居中，我已经有一个父 div，我想让孩子居中。 76.24.93.123我希望文本和输入字段到左侧框的中心。
现在您将“center”div 设置为与“aside”div 相同的宽度，因此左侧/右侧边距不会做任何事情。如果减小“中心”的宽度，它将使框内的内容居中。 Updated jsFiddle这里我设置“center”的宽度为150px。