html - How to horizontally align all input button with all other items -

html - How to horizontally align all input button with all other items -

i wanting create form fields, , input buttons horizontally aligned. tried setting margin: 0 auto on items (after resetting css) seems length of text fields create items not horizontally center (the input button takes much less space). there easy way offset difference in widths without using absolute positioning (i want responsive).

here html:

<h1> please upload 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>

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

and here issue mentioning. (i choose files button centered)

just add together border input fields create clear it's centre aligned:

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

html css forms