将字段集中的输入和选择字段居中

Question

我正在制作一个应用程序，使用字段集收集信息。我目前正在尝试将输入和选择字段集中在字段集中，但我在这样做时遇到了问题

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

现在，它在场地的左手边对齐。感谢您的帮助。非常感谢。

Answer 1

将display:flex;与父元素上的flex-direction: column;和align-items: center;一起使用。

使用显示器柔性时的对齐注意事项：

• 如果弯曲方向设置为默认值(行(，则使用调整内容以沿x轴对齐项目
• 如果弯曲方向设置为(列(，则使用对齐项目沿x轴对齐项目
• 如果要在y轴上对齐项目，请反转此操作

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

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>