如何將輸入元素與文本一起居中？

Question

目前，我的網頁布局如下

但我希望客戶名稱，到期日期，電話號碼等與頁面上的其他標題和部分一起居中。 我試過使用text-align: center和margin: 0 auto但是它們都不起作用。 有什么想法嗎？

這是我的代碼：

 * { 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

最快的解決方案（即，無需重構CSS ）將在樣式的末尾添加以下樣式規則：

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

=====

工作原理：

如果為block （或inline-block ）元素的auto margin-left和margin-right給元素，瀏覽器將為該元素提供相等的邊距-將該元素在其父元素內居中。

為了使此功能順利運行，瀏覽器需要知道父級元素的寬度和元素的寬度（否則，它無法計算兩個寬度之間的差並將其除以2，以得出margin-left和margin-right的長度）。

在你的CSS，你已經說了父母的寬度：

.container {
    width: 1250px
}

而不是元素本身的寬度。

您也沒有給元素auto設置margin-left和margin-right 。

上面的樣式聲明

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

解決這兩個遺漏。

Answer 2

在所有輸入中，在它們周圍放<span> 。 HTML代碼：

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

CSS：

span.inputcentered{
align:center;
}