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

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 )元素 a margin-left和一个 margin-right的 auto ，浏览器将为该元素提供相等的边距 - 使元素在其父元素中居中。

为了顺利运行，浏览器需要知道父元素的宽度和元素的宽度(否则它无法计算两个宽度之间的差值并除以 2，得出 margin-left 的长度和margin-right ).

在您的 CSS 中，您已经声明了父级的宽度:

.container {
    width: 1250px
}

但不是元素本身的宽度。

你也没有给元素一个 margin-left和一个 margin-right的 auto .

上面的样式声明

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

修复了这两个遗漏。