Как отцентрировать панель поиска в jumbotron?

Question

У меня есть следующий html: (jsfiddle включен внизу):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>



<div class="jumbotron">
      <!--Search Bar-->
    <form class="form-inline" method = "GET" action = "{% url 'search' %}" >
        <input class="form-control mr-sm-2" name="query"  type="text" placeholder="Zip Code or City/Town">
        <button class="btn btn-outline-success  my-2 my-sm-0" type="submit">Find Jobs</button>
    </form>
  <p class="lead">The only job site on the web dedicated to positions that don't require a degree
      (IOS and Android app coming soon!)</p>
  <hr class="my-4">
  <p class="lead">
    <a  class="btn btn-primary btn-md learn_more_buttons" href="{% url 'business_owners_info' %}" role="button">Business Owner's Learn More</a>
    <a class="btn btn-primary btn-md learn_more_buttons" href="{% url 'job_seekers_info' %}" role="button">Job Seekers Learn More</a>
  </p>
</div>

http://jsfiddle.net/x1d02twy/2/

Как центрировать панель поиска и кнопку на джумботроне?

Answer 1

Добавьте div внешние элементы, которые вы хотите центрировать, а затем примените margin: 0 auto; для центрирования этой оболочки.

http://jsfiddle.net/x1d02twy/8/

Answer 2

Поскольку я проверил ваш код, вы используете Bootstrap, чтобы вы могли добавить bootstrap классы по умолчанию, такие как:

Добавить text-center класс к основному div классу и justify-content-center класс для формирования тега.

Проверьте это: http://jsfiddle.net/x1d02twy/11/

Answer 3

Добавьте класс justify-content-center к вашей форме

http://jsfiddle.net/x1d02twy/6/