<分区>
我目前在使用 display: table 对齐的输入表单时遇到问题。我使用 display: table-row 和 display: table-cell 将每个部分放入自己的区域。这使我的输入表单看起来很干净，但唯一的问题是我无法终生将表单对齐到页面的中心。我也在使用 Bootstrap 。
下面是表单的 html 代码:
.addPlayerForm form {
text-align: center;
}
.addPlayerForm {
display: table;
padding: 25px;
text-align: center;
position: center;
display: inline-flex;
}
.addPlayerForm .form-row {
display: table-row;
}
.addPlayerForm label {
display: table-cell;
}
.addPlayerForm input {
display: table-cell;
width: 300px;
}
.addPlayerForm select {
width: 300px;
}<div class="addPlayerForm">
<form method="post" action="">
<div class="form-row">
<input type="text" name="FirstName" align="center"><br>
</div>
<div class="form-row">
<input type="text" name="LastName"><br>
</div>
<div class="form-row">
<input type="date" name="DOB"><br>
</div>
<div class="form-row">
<select name="MemberType">
<option value="0" selected="">Please Select a Membership Type</option>
<option value="1">Junior</option>
<option value="2">Senior</option>
<option value="3">VP</option>
<option value="4">Ladies</option>
<option value="5">Social</option>
<option value="6">Girls</option>
<option value="7">Colts</option>
</select><br>
</div>
<div class="form-row">
<select name="ContactType">
<option value="0" selected="">Please Select a Contact Type</option>
<option value="1">Email</option>
<option value="2">Phone</option>
</select><br>
</div>
<div class="form-row">
<input type="text" name="ContactInfo"><br>
</div>
<button class="btn btn-dark" type="submit">Submit</button>
</form>
</div>如果有人能够帮助我解决这个问题，我将不胜感激。提前致谢。