居中表单 HTML/Bootstrap答案

【问题标题】：Centering a form HTML/Bootstrap居中表单 HTML/Bootstrap
【发布时间】：2021-09-06 11:26:40
【问题描述】：

如何使这个表格居中？无论我尝试过什么（改变 div 类、样式等，它仍然没有居中）。

我尝试过使用 flex box 和其他工具，但无论我做什么，如果某些东西居中，输入字段就会停留在最左边。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form>
    <div class="fc">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      </div>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

【问题讨论】：

请注意，<input> 是一个空标签。意味着它没有结束标签。因此</input> 是无效的，因为它不存在。
将 text-left 替换为 text-center
@Grumpy 当我这样做时，输入字段仍然停留在页面的左侧
将margin: 0 auto; 添加到您的表单中
我在这里尝试过：jsfiddle.net/TestFiddle1001/x8et6ydq/4

标签： html css bootstrap-4

【解决方案1】：

嗯，有很多方法可以居中。但是由于您使用的是 Bootstrap，我想我会尝试使用 Bootstrap 类。

我使用网格系统构建一行，其中一个大列横跨整行。我将表单包装在一个带有实用程序类 d-flex 的 div 中，并使用 justify-content-center 对其进行修改以使其居中。

在表单中我使用form-row。然后使用form-group 表示form-row 内的列。为了修复格式，我在输入中输入了form-control。

最后我把按钮放在一个单独的form-row 上。这仅使用引导程序即可解决您的问题。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row">

  <div class="col-12">

    <div class="d-flex justify-content-center">

      <form>
        <div class="form-row">

          <div class="form-group">

            <label for="name">Name</label>
            <input id="name" class="form-control" type="text">
          
          </div>

        </div>

        <div class="form-row">

          <div>
            <button class="btn" type="submit">Submit</btn>
            </div>
            
          </div>

      </form>

    </div>

  </div>

</div>

【讨论】：

【解决方案2】：

您只需将表单设置为列，然后.text-center 就可以了：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form class="col-12">

    <h3>
      Name
    </h3>
    <input class="fc" style="width: 35%" type="text"></input>
    <br/>
    <input class="btn" type="submit" value="Submit" />

  </form>
</div>

【讨论】：

【解决方案3】：

在样式中使用这个

margin-left:auto;margin-right:auto;

还将任何内容居中以供将来参考

之前也有人问过这个问题： Centering a form in bootstrap not working

【讨论】：

【解决方案4】：

添加margin: 0 auto; 就像@Sysix 在 cmets 中所说的那样

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row text-center">
  <form style="margin: 0 auto">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

【讨论】：

【解决方案5】：

<div class="row text-center">
  <form>
        <h3>
          Name
        </h3>
        <input class="form-control" type="text">
        <input class="btn" type="submit" value="Submit">
  </form>
</div>

【讨论】：

这对我来说仍然不起作用，它无法使输入字段居中