时间戳

首页 > 解决方案 > 居中输入并在字段集中选择字段

html - 居中输入并在字段集中选择字段

问题描述

我正在制作一个使用字段集收集信息的应用程序。我目前正在尝试将输入居中并选择字段集中的字段，但我在这样做时遇到了麻烦。这是HTML：

          <fieldset>
            <legend align = "center">Enter Income Here</legend>
            <p>
              <label>Hourly Rate: </label>
              <input type="number" min="0" placeholder="Hourly Rate" id="Rate">
            </p>
            <p>
              <label>Hours Per Week: </label>
              <input type="number" min="0" max="40" placeholder="Hours / Week" id="HoursPer">
            </p>
            <p>
              <label>Overtime Hours / Week: </label>
              <input type="number" min="0" placeholder="Overtime Hours / Week" id="OvertimePer">
            </p>
            <hr style="visibility: visible;">
            <p>
                <label>Federal Taxes: </label>
                <input type="number" min="0" max="100" placeholder="Federal Tax %" id="Federal">
            </p>
            <p>
                <label>State Taxes: </label>
                <input type="number" min="0" max="100" placeholder="State Tax %" id="State">
            </p>
            <p>
              <label>Fica Taxes: </label>
              <input type="number" min="0" max="100" placeholder="Other Tax %" id="Other">
            </p>
            <hr style="visibility: visible;">
            <p>
                <label>Frequency: </label>
                <select name="frequency" id="frequency">
                  <option value="" selected="selected">Select Frequency</option>
                </select>
            </p>
            <p>
              <label>Status: </label>
              <select name="status" id="status">
                <option value="" selected="selected">Select Frequency First</option>
              </select>
            </p>
          </fieldset>

以及字段集的 CSS：

  fieldset {
    display: inline-block;
    min-width: 500px;
    max-width: 500px;
    border: 2px groove;
    margin-bottom: 350px;
  }

  fieldset legend {
    font-size: x-large;
    font-weight: bold;
  }
  
  fieldset p {
    display: table-row;
  }
  
  fieldset input, fieldset select, fieldset label {
    display: table-cell;
  }

  fieldset input, fieldset select {
    min-width: 250px;
  }
  
  fieldset label {
    text-align: right;
    vertical-align: middle;
    font-size: small;
  }

现在它在字段集的左侧对齐。任何帮助表示赞赏。谢谢你。

标签： htmlcss

解决方案

在父元素上使用和display:flex;。flex-direction: column;align-items: center;

使用 display flex 时的对齐注意事项：

  • 如果您的flex-direction设置为默认值 ( row )，则使用 justify-content沿x 轴对齐项目。
  • 如果您的flex-direction设置为 ( column )，则使用align- items 沿 x 轴对齐项目。
  • 反转此以沿y 轴对齐项目

如果您希望输入标签以输入为中心，请在标签选择器上使用相同display:flex;的flex-direction: column;和。align-items: center;p

fieldset {
  display: flex; /* added */
  flex-direction: column; /* added */
  align-items: center; /* added */
  min-width: 500px;
  max-width: 500px;
  border: 2px groove;
  margin-bottom: 350px;
}

hr { 
  width: 100%; /* added */
}

fieldset legend {
  font-size: x-large;
  font-weight: bold;
}

fieldset p {  
  display: flex; /* added */
  /* added change this to column to place the labels on top of the inputs*/
  align-items: center; /* added */
}

fieldset input,
fieldset select,
fieldset label {
  display: table-cell;
  padding-right: 5px;
}

fieldset input,
fieldset select {
  min-width: 250px;
}

fieldset label {
  text-align: right;
  vertical-align: middle;
  font-size: small;
}
<fieldset>
  <legend align="center">Enter Income Here</legend>
  <p>
    <label>Hourly Rate: </label>
    <input type="number" min="0" placeholder="Hourly Rate" id="Rate">
  </p>
  <p>
    <label>Hours Per Week: </label>
    <input type="number" min="0" max="40" placeholder="Hours / Week" id="HoursPer">
  </p>
  <p>
    <label>Overtime Hours / Week: </label>
    <input type="number" min="0" placeholder="Overtime Hours / Week" id="OvertimePer">
  </p>
  <hr style="visibility: visible;">
  <p>
    <label>Federal Taxes: </label>
    <input type="number" min="0" max="100" placeholder="Federal Tax %" id="Federal">
  </p>
  <p>
    <label>State Taxes: </label>
    <input type="number" min="0" max="100" placeholder="State Tax %" id="State">
  </p>
  <p>
    <label>Fica Taxes: </label>
    <input type="number" min="0" max="100" placeholder="Other Tax %" id="Other">
  </p>
  <hr style="visibility: visible;">
  <p>
    <label>Frequency: </label>
    <select name="frequency" id="frequency">
      <option value="" selected="selected">Select Frequency</option>
    </select>
  </p>
  <p>
    <label>Status: </label>
    <select name="status" id="status">
      <option value="" selected="selected">Select Frequency First</option>
    </select>
  </p>
</fieldset>

推荐阅读