如何将输入元素与文本对齐？

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）元素提供margin-left和margin-right auto，则浏览器会为该元素提供相等的边距 - 它将元素置于其父元素中。

为了使其顺利运行，浏览器需要知道父元素的宽度和元素的宽度（否则它无法计算两个宽度之间的差异并除以2，以得出{{1}的长度}和margin-left）。

在你的CSS中， 已经说明了父级的宽度：

margin-right

但不是元素本身的宽度。

你也没有给.container { width: 1250px } 和margin-left margin-right提供元素。

上面的样式声明

auto

修复了这两个遗漏。

Answer 2

在所有输入中，将<span>放在它们周围。 HTML代码：

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

的CSS：

span.inputcentered{
align:center;
}