html - 如何将所有输入按钮与所有其他元素水平对齐

Question

我想制作一个所有字段和输入按钮完全水平对齐的表单。我尝试在所有元素上设置 margin: 0 auto (在重置 css 之后)，但似乎文本字段的长度使元素看起来水平居中(输入按钮占用空间小得多)。有没有一种简单的方法可以不使用绝对定位来抵消这种宽度差异(我希望它能够响应)。

这是 html:

<h1>
    Please upload your file
</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="upload" multiple="multiple" ><br>
    <input type="submit" value="Upload">
</form>

还有CSS:

h1, form {
    display: block;
    text-align: center;
    color: red;
    margin-top: 1.2em;
}
h1 {
    font-size: 2em;
    margin-top: 2em;
    margin-bottom: 1em;
}

p {
    margin-top: .2em;
    margin-bottom: 1em;
}

input {
    display: block;
    margin:0 auto;
}

input[type=submit] {
    font-size: 2em;
}

这就是我要提到的问题。 (我希望 choose files 按钮居中)

Answer 1

只需在您的输入字段中添加一个边框，以表明它是居中对齐的:

JSFiddle

input {
    display: block;
    margin:0 auto;
    border: 1px solid #cfcfcf;
}