如何将输入元素与文本一起居中？

Question

Currently my webpage's layout looks like this

but I want the customer name, due date, phone #, etc to be centered along with the other headings and sections on the page. I've tried using text-align: center and margin: 0 auto but none of them has worked. Any thoughts?

Here's my code:

 * { margin: 0 } .container { width: 1250px } .header { background-color: #8000FF; margin: auto; width: 50%; border: 3px solid #41087B; padding: 10px; } .header img { float: left; padding: 5px; } .header h1 { color: white; line-height: 80px; text-align: center } .label { float: left; padding: 5px; color: red; } .label-container { text-align: center; margin: auto } .label p { padding: 2px; } .inputBox { float: left; text-align: center; } .inputBox p { text-align: center; padding: 1px } .label2 { float: left; padding: 5px; color: red } .label2 p { padding: 2px } .inputBox2 { float: left; } .inputBox2 p { padding: 1px } .contentBackground { background-color: #D8D8D8; clear: left; width: 60%; margin: auto; height: 200px display: block; } .uploadFile p { text-align: center; padding: 20px; color: red } .content p { text-align: center; color: red; padding: 7px } .dropDown p { text-align: center; padding: 40px; margin-left: 8px; height: } .moreFiles { text-align: center } .textBox { text-align: center } .textBox p { text-align: center; padding: 5px } .button { text-align: center } 

 <div class="container"> <div class="header"> <h1>Order Form</h1> </div> <div class="label-container"> <div class="label"> <br> <p><b>Customer Name</b> </p> <p><b>Due Date</b> </p> <p><b>Phone #</b> </p> </div> <div class="inputBox"> <br> <p> <input type="text"> </p> <p> <input type="text"> </p> <p> <input type="text"> </p> <br> </div> <div class="label2"> <br> <p><b>Contact</b> </p> <p><b>E-mail</b> </p> <p><b>PO#</b> </p> </div> <div class="inputBox2"> <br> <p> <input type="text"> </p> <p> <input type="text"> </p> <p> <input type="text"> </p> <br> </div> </div> <div class="contentBackground"> <div class="uploadWrapper"> <div class="fileUpload"> <div class="uploadFile"> <p>Upload File: <span style="color:black"><input type="file" name="uploadField" /></span> </p> </div> <div class="content"> <p>Width(Inch) <input type="text" style="width: 100px">Height(Inch) <input type="text" style="width: 100px">Quantity <input type="text" style="width: 100px"> </p> </div> </div> </div> <div class="dropDown"> <p>Material <select style="max-width: 10%;"> <option value="Paper">Paper</option> <option value="Vinyl Banner">Vinyl Banner</option> <option value="Adhesive Vinyl">Adhesive Vinyl</option> <option value="Polygloss">Polygloss</option> <option value="Translucent Vinyl">Translucent Vinyl</option> <option value="Static Cling Clear">Static Cling Clear</option> <option value="Static Cling White">Static Cling White</option> <option value="Reverse Static Cling">Reverse Static Cling</option> <option value="Outdoor Paper">Outdoor Paper</option> <option value="Backlit Film">Backlit Film</option> <option value="Foam">Foam</option> <option value="Coroplast">Coroplast</option> <option value="Corrugated Board">Corrugated Board</option> <option value="Sintra">Sintra</option> <option value="Canvas">Canvas</option> <option value="Fabric">Fabric</option> <option value="All Cling">All Cling</option> </select> Lamination <select> <option value="None">None</option> <option value="Matte">Matte</option> <option value="Gloss">Gloss</option> <option value="Lexan">Lexan</option> <option value="Erasable">Erasable</option> </select> Mounting <select> <option value="3/16&quot Foam">3/16" Foam</option> <option value="3/16&quot Gator">3/16" Gator</option> <option value="1/8&quot Sintra">1/8" Sintra</option> <option value="24point Card">24point Card</option> <option value="50point Card">50point Card</option> <option value="Adhesive Back">Adhesive Back</option> <option value="MDF">MDF</option> <option value="Coroplast">Coroplast</option> <option value="Masonite">Masonite</option> <option value="020 Styrene">020 Styrene</option> <option value="040 Styrene">040 Styrene</option> <option value="060 Styrene">060 Styrene</option> <option value="080 Styrene">080 Styrene</option> <option value="Corrugated Board">Corrugated Board</option> </select> Ink <select> <option value="Indoor">Indoor</option> <option value="Outdoor">Outdoor</option> </select> </p> </div> </div> <div class="moreFiles"> <a href="#" id="add">Add another file?</a> </div> <div class="textBox"> <p> <label>Remark?</label> </p> <textarea></textarea> </div> <div class="button"> <br> <button type="submit">Submit order</button> </div> </div> 

Answer 1

The quickest solution (ie. without re-factoring your CSS ) will be to add the following style rules to the end of your styles:

.label-container {
width: 500px;
margin: 0 auto;
}

=====

Why this works:

If you give a block (or inline-block ) element a margin-left and a margin-right of auto , the browser will give that element equal margins - which centers the element within its parent.

For this to work smoothly, the browser needs to know the width of the parent and the width of the element (else it cannot calculate the difference between the two widths and divide by 2, to derive the length of margin-left and margin-right ).

In your CSS, you had already stated the width of the parent:

.container {
    width: 1250px
}

but not the width of the element itself.

Nor had you given the element a margin-left and a margin-right of auto .

The style declaration above

.label-container {
width: 500px;
margin: 0 auto;
}

fixes both these omissions.

Answer 2

In all inputs, put <span> around them. HTML Code:

<span class="inputcentered">
<input type=....../>
<input ...../>
<input ...../>
<input ...../>
</span>

css:

span.inputcentered{
align:center;
}