如何在中心获取表格

Question

如果jumbotron类居中对齐，我找不到任何对齐的代码。

我只是使用text-align：居中，但注册区域不会移动。

我无处可寻。

 .jumbotron {

        background-image: url(background.jpg);
        text-align: center;
    }


<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>


  <form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email address</label>

  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Email address</label>
    <input type="password" class="form-control" id="email" placeholder="Your email">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Sign up</button>
</form>

包括最后一个div

就像下面的图片一样

enter image description here

Answer 1

获取一个div标签，然后将表单放入其中。给div标签一个以文本对齐居中的属性，它将为您提供帮助。

Answer 2

有很多方法可以做到这一点。使用 bootstrap4 ，您可以使用其flexbox utility classes，而无需编写任何自定义样式。

<div class="jumbotron text-center">
    TEXT
    ...
    <div class="d-flex flex-row justify-content-center">
        <form class="form-inline">
            <div class="form-group ...">
                <label />
                <input />
            </div>
            <button type="submit" />
        </form>
    </div>
</div>

https://jsfiddle.net/davidliang2008/xa62ygzq/24/