javascript - div 搜索容器未居中

Question

我想将搜索容器居中在大屏幕中，我尝试使用之前有关将 div 元素居中的帖子进行居中，但结果并非如此。

.jumbotron {
  background-image:url('http://i.imgur.com/zXprXPv.jpg?3');
  height: 500px;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  background-color: #040404;
  opacity: 0.4;
  width: 100%;
  height: 70px;
  top: 383px;
}

<div class="jumbotron">
  <div class="container">
    <div class="search-container">
      <div class="row">
        <div class="col-lg-8">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

一种简单的方法是编写一个名为 centered 的 css 类。我已经编写并进行了更改，也可能会解决您的问题。

.jumbotron {
  background-image:url('http://i.imgur.com/zXprXPv.jpg?3');
  height: 500px;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  background-color: #040404;
  opacity: 0.4;
  width: 100%;
  height: 70px;
  top: 383px;
}

.centered {
  margin: auto;
  width: 35%;
  padding: 20px;
}

<div class="jumbotron">
  <div class="container">
<div class="search-container">
  <div class="row">
    <div class="col-lg-8 centered">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
      </div>
    </div>

  </div>
</div>
  </div>
</div>