如何将CSS表格对齐到中心

Question

我目前遇到一个问题，我使用 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>

如果有人能帮助我解决这个问题，我将非常感激。提前谢谢。

- Kuritsu

---

这个回答解决了你的问题吗？如何使用CSS将表格置于页面中央？ - AAM111

Answer 1

使用 margin:0 auto; 更改：

.addPlayerForm {
  display: table;
  padding: 25px;
  text-align: center;
  position: center;
  display: inline-flex;
}

收件人：

.addPlayerForm {
  display: table;
  padding: 25px;
  margin:0 auto;
}

.addPlayerForm form {
  text-align: center;
}

.addPlayerForm {
  display: table;
  padding: 25px;
  margin:0 auto;
}

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

- Ehsan

---

非常感谢。我在凌晨3点很紧张，可能没有看到这个解决方案。问题已解决！ - Kuritsu