html - 尝试将所有输入框居中对齐

Question

目前我正在制作一个具有多个输入的表单，我正在使用 flex box 使这些输入出现在一列中，并使用 text-align center 将整个表单置于居中行中。我试图让文本框都位于页面的中央，并且文本相应地移动。

.mainForm {
  text-align: center;
}

.left {
  float: left;
}

.inputs {
  display: flex;
  flex-direction: column;
}

.radio {
  display: flex;
  justify-content: center;
}

textarea {
  overflow-y: scroll;
  resize: none;
}

.feedBack {
  text-align: center;
}

<div class="information">

  <p class="formInputs"> Policy Number:
    <input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
  <p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>

  <p class="formInputs">Control Number:
    <input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
  <p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>

  <p class="formInputs">Last Name or Business Name:
    <input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
  <p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>

  <p class="formInputs">First Name :
    <input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
  <p class="print">First Name: <span class="display" id="display_firstName"></span></p>

  <p class="formInputs">Comments:
    <textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
  <p class="print">Comments: <span class="display" id="display_comment"></span></p>

</div>

Answer 1

如果您希望您的输入/文本区域绝对居中，您必须将您的文本包裹在<label> 中。元素(或任何其他 HTML 元素，但出于可用性原因，您应该始终使用 <label> )。那是因为我们想独立于输入来定位文本。一个例子:

<p class="formInputs">
  <label for="polNum">Policy Number:</label>
  <input id="polNum" name="polNum" type="text" />
</p>

完成后，您可以使用以下技巧:

1. 为输入元素设置固定宽度。假设我们希望它们是 200px宽的。我们不是在输入元素本身上设置它，而是在包含父元素上设置它，.formInputs , 然后将输入元素设置为占据整个宽度。
2. 定位<label>元素绝对在.formInputs内 parent 。将其设置为 right: 100%这样它将向左偏移父级的整个宽度。
3. 使用右填充，使标签文本的右边缘不会直接粘在输入的左边框上

请参阅下面的概念验证:

textarea {
  overflow-y: scroll;
  resize: none;
}

.formInputs {
  position: relative;
  width: 200px;
  margin: 0 auto;
}

.formInputs label {
  position: absolute;
  right: 100%;
  padding-right: 10px;
  white-space: nowrap;
}

.formInputs input,
.formInputs textarea {
  width: 100%;
}

<div class="information">

  <p class="formInputs">
    <label for="polNum">Policy Number:</label>
    <input id="polNum" name="polNum" type="text" />
  </p>

  <p class="formInputs">
    <label for="membNbr">Control Number:</label>
    <input id="membNbr" name="membNbr" type="text" />
  </p>

  <p class="formInputs">
    <label for="lastName">Last Name or Business Name:</label>
    <input id="lastName" name="lastName" type="text" />
  </p>

  <p class="formInputs">
    <label for="firstName">First Name:</label>
    <input id="firstName" name="firstName" type="text" />
  </p>

  <p class="formInputs">
    <label for="comment">Comments:</label>
    <textarea name="comment" id="comment" cols="30" rows="2"></textarea>
  </p>

</div>