如何在巨型屏幕中居中搜索栏?

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-centerdiv类，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/