html - 如何将 css 表格居中对齐-6ren

html - 如何将 css 表格居中对齐

转载作者：行者123 更新时间：2023-12-02 02:40:30

<分区>

我目前在使用 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>

如果有人能够帮助我解决这个问题，我将不胜感激。提前致谢。

文章推荐： r - 从R中值之间的字符串中提取数据帧

文章推荐： python - 从 PPTx 文件 (powerpoint) 中提取演示者注释

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何将 css 表格居中对齐