CODEWITHSUNDEEP
htmlcssforms
Startec
Startec

Reputation: 13206

How to horizontally align all input button with all other items

I am wanting to make a form where all the fields, and the input buttons are perfectly horizontally aligned. I tried setting margin: 0 auto on all the items (after resetting the css) but it seems like the length of the text fields make it so the items do not look horizontally center (the input button takes up much less space). Is there an easy way to offset this difference in widths without using absolute positioning (I want this to be responsive).

Here is the 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>

And the 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 is the issue I am mentioning. (I would like the choose files button centered)enter image description here

Upvotes: 0

Views: 77

Answers (2)

Tanner
Tanner

Reputation: 22733

Just add a border to your input fields to make it clear that it's centre aligned:

JSFiddle

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

Upvotes: 1

&#233;sasari
&#233;sasari

Reputation: 336

You can try setting input to a relative position and reposition from there:

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

Upvotes: 0

Related Questions