div搜索容器没有居中

Question

我想将搜索容器放在中心位置 在一个jumbotron中，我尝试使用前面关于居中div元素的帖子进行居中，但结果并非如此。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

使用此css将元素定位为verticacal和horizo​​ntal。 下面的css将使.search-container中心相对于jambotron。

.jumbotron {
    position: relative;
}
.search-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

注意：搜索容器将有自己的宽度和高度，transform将水平和垂直地转换元素-50％，使其成为相对父级的中心。

Answer 3

只需将text-align：center添加到.container类以进行水平对齐

＆＃13;

＆＃13;

.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;
  text-align:center;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

父母的孩子有很多垂直和水平居中的解决方案。

考虑到浏览器兼容性，一种态度是：

将text-align: center分配给父div，并为孩子使用display: inline-block和vertical-align: middle：

.jumbotron {
    text-align: center;
}
.jumbotron .container{
    display: inline-block;
    vertical-align: middle;
}

Answer 5

.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;
   position: relative;
}

.jumbotron .container {
  position: absolute;
  background-color: #040404;
  opacity: 0.4;
  width: 100%;
  height: 50px;
  top: 50%;
  margin-top: -35px;
  padding-top: 20px;
  text-align: center;

在这里检查JsFiddle：https://jsfiddle.net/LeoAref/ozLp93tg/

Answer 6

您需要将.col-lg-8设置为text-align: center;。 你可以看看这里：https://jsfiddle.net/kf93ufw7/

如果你想让中心垂直使用它：

.search-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

链接到这里：https://jsfiddle.net/kf93ufw7/1/