Question

目前我正在创建一个具有多个输入的表单，我使用弹性框使这些输入显示在列中，并使用文本对齐中心将整个表单放入居中的行中。我试图让文本框全部位于页面的中心，文本会相应地移动。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

这样的东西？

D = D & (~B | C)

http://jsfiddle.net/Lcgfqjh9/

Answer 2

将表格包裹在div中。
将div的显示设置为block并将text-align设置为center（这将是
以包含的形式为中心。
将表单的显示设置为内联块（自动调整大小为内容），左侧和右边距自动（水平居中），和 text-align to left（或者它的子节点也将居中对齐）。

HTML文件

<div class="form">
    <form method = "post", action=""> 
        --------- 
    </form>
</div>

在.css中像这样使用

 div.form { 
        display: inline-block; 
        text-align: center; 
    }

Answer 3

您可以将整个内容放在包装器中，使用以下设置对其应用flex以使表单居中，并将flex和justify-content: space-between应用于单行（即.formInputs元素）对齐左右边框的文本和输入字段：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.formInputs {
  display: flex;
  justify-content: space-between;
}

<div class="wrapper">
  <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>
</div>

Answer 4

如果您希望输入/ textarea绝对居中，则必须将文本包装在<label>元素（或任何其他HTML元素中），但出于可用性原因，您应始终使用<label> ）。那是因为我们想要独立于输入定位文本。一个例子：

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

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

为输入元素设置固定宽度。假设我们希望它们200px宽。我们不是在输入元素本身上设置它，而是将它设置在包含的父项.formInputs上，然后设置输入元素以占用此全宽。
将<label>元素置于.formInputs父级内。将其设置为right: 100%，使其向左偏移父级的全宽。
使用右侧填充，使标签文本的右边缘不直接粘贴到输入的左边框

见下面的概念验证：

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>

Answer 5

由于在这里使用绝对定位很诱人，它有一个缺陷，那就是当文本需要包裹或不适合较窄的屏幕时，它看起来不会很好。

巧妙地使用伪元素，可以避免，label和input的伪匹配将在中间。

然后我们提供label和伪全宽，它将缩小相等（flex-shrink默认为1）并保持input居中。

最后，我们将width和flex-shrink: 0添加到ìnput（以及.display元素），其中flex-shrink阻止其缩小并保留其width 1}}。

在较窄的屏幕上或长文本中，label现在可以很好地包装文本。

注意，p并不是一个包装器，请使用div。

Stack snippet

.mainForm {
  text-align: center;
}

.information > div {
  display: flex;
  align-items: center;
}
.information > div label,
.information > div::after {
  content: '';  
  width: 100%;
  text-align: right;
}
.formInputs input,
.formInputs textarea,
.print span {
  flex-shrink: 0;
  width: 180px;
  margin: 0 10px;
}

.print .display::before {   /*  temp. added to show its output  */
  content: '(print)'
}

.radio {
  display: flex;
  justify-content: center;
}

.formInputs ~ .formInputs {
  margin-top: 10px;
}

textarea, input {
  box-sizing: border-box;
}

textarea {
  overflow-y: scroll;
  resize: none;
}

.feedBack {
  text-align: center;
}

<div class="information">

  <div class="formInputs"> <label>Policy Number:</label>
    <input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></div>
    
  <div class="print"> <label>Policy Number:</label> <span class="display" id="display_policyNumber"></span></div>

  <div class="formInputs"><label>Control Number:</label>
    <input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></div>
    
  <div class="print"> <label>Control Number:</label> <span class="display" id="display_controlNumber"></span></div>

  <div class="formInputs"> <label>Last Name or Business Name:</label>
    <input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></div>
    
  <div class="print"> <label>Last Name or Business Name:</label> <span class="display" id="display_lastName"></span></div>

  <div class="formInputs"> <label>First Name :</label>
    <input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></div>
    
  <div class="print"> <label>First Name:</label> <span class="display" id="display_firstName"></span></div>

  <div class="formInputs"> <label>Comments:</label>
    <textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></div>
    
  <div class="print"> <label>Comments:</label> <span class="display" id="display_comment"></span></div>

</div>

尝试将所有输入框对齐到页面中心

5 个答案: