html - 如何将包裹在弹性容器中的表单居中？

Question

.jumbotron {
  background-image: url(background.jpg);
  color: white;
  text-align: center;
}

<div class="jumbotron">
  <h1 class="display-4">My Awesome App</h1>
  <p class="lead">This is why you should download this fantastic app!</p>
  <p>Want to know more?</p>
  <p>Join our mailing list!</p>
  <hr>
  <form class="form-inline" id="jumbo-form">
    <div class="form-group mx-sm-3 mb-2">
      <input type="password" class="form-control" id="email" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-primary mb-2">Sign Up Now</button>
  </form>
</div>

在 jumbotron 类中，表单之前的所有内容都居中。但是，表格左对齐。我尝试了其他问题的解决方案，例如添加绝对位置，然后添加边距：自动，但仍然无法正常工作。

标签： htmlcssformsbootstrap-4

Answer 1

您的表单是一个 flex 容器，flex 可以水平居中 justify-content: center;和垂直居中align-items: center（如果高度足够可用）

在css下面添加，这将使表格居中

.form-inline {
 justify-content: center;
}