引导程序4：巨型机内部的中心内联形式

Question

我在超大型飞机内有一个内联表格。我想居中。

我试着text-align:center在超大屏幕上使用，它确实将大屏幕上的所有其他元素居中，但内联表单元素除外。所以我不知道这里出了什么问题。

这是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>

这是CSS：

body{
  position: relative;
}

#home{
  background-image: url('../img/jumbotron-bkg-2.jpg');
  margin-top: 50px;
  text-align: center;
}

#yourEmail{
  width: 350px;
}

#about h2, #about-summary{
  text-align: center;
}

.card{
  margin-bottom: 30px;
}

.card img{
  height: 350px;
  width: 100%;
}

#cards-container{
  margin-bottom: 50px;
  padding: 20px 40px;
}

#download{
  text-align: center;
  padding-top: 100px;
  padding-bottom: 150px;
  background-color: #0afff2;
}

Answer 1

在上使用justify-content-center帮助程序类form。这将使内容与flex属性居中justify-content: center;

#home{

  background-image: url('../img/jumbotron-bkg-2.jpg');

  margin-top: 50px;

  text-align: center;

}


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<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 justify-content-center">

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