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

当我检查完您的代码后，您正在使用Bootstrap，因此可以添加bootstrap这样的默认类：

在主text-center类中添加div类，并在justify-content-center类中添加标签。

检查以下内容：http://jsfiddle.net/x1d02twy/11/

Answer 2

将justify-content-center类添加到表单中

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

Answer 3

在您要居中的元素外部添加div，然后将margin: 0 auto;应用于该包装的中心。

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

如何在巨无霸中将搜索栏居中？

3 个答案: