如何将所有输入按钮与所有其他项目水平对齐

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

Answer 2

您可以尝试将输入设置为相对位置并从那里重新定位：

input {
    display: block;
    margin: 0 auto;
    position: relative;
    left: 25px;
}