Html bootstrap 4：在jumbotron中居中内联表单

我在jumbotron中有一个内联表单。我想把它放在中间

我尝试在jumbotron上使用

text align:center

，它确实将jumbotron中除内联表单元素之外的所有其他元素居中。所以我不知道这里出了什么问题

这是HTML代码：

<div class="jumbotron" id="home">
  <h1 class="display-3">My Awesome App!</h1>
  <p class="lead">This is why you should download this fantastic app!</p>
  <hr class="my-4">
  <p>Want to know more? Join our mailing list!</p>
  <form class="form-inline">
    <label class="sr-only" for="yourEmail">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <div class="input-group-addon">@</div>
      <input type="text" class="form-control" id="yourEmail" placeholder="Your Email">
    </div>
    <button type="button" class="btn btn-primary my-2 my-sm-0">Sign Up</button>
  </form>
</div>

---

使用

表单

上的

justify资源中心

助手类。这将使用flex属性

justify content:center将内容居中


#主页{
背景图片：url（'../img/jumbotron-bkg-2.jpg'）；
边缘顶部：50px；
文本对齐：居中；
}

我最棒的应用程序！
这就是为什么你应该下载这个奇妙的应用程序

想知道更多吗？加入我们的邮件列表

电子邮件
@
注册
您使用的是引导程序3还是引导程序4？@MichaelCoker引导程序4。阿尔法版本