css - 如何使用 Bootstrap 输入组进行中间垂直对齐

Question

我看过其他关于如何使用 bootstrap 垂直对齐:居中的帖子。那很好用。

我想做的是根据标准 Bootstrap ( http://getbootstrap.com/components/#input-groups-buttons ) 创建一个带有“go”按钮的搜索栏，它在 div 中垂直对齐，如下所示:

<div class="col-lg-6 vcenter">
  <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><!-- /input-group -->
</div><!-- /.col-lg-6 -->

我遇到的问题是在我尝试添加 css 以垂直对齐它的那一刻，一切都变得疯狂并且不再对齐:

.vcenter {
    height: 375px;
    line-height: 300px;
}

.vcenter input, .vcenter span{
    display: inline-block;
    vertical-align: middle;
}

如有任何帮助，我们将不胜感激。

Answer 1

请引用代码:

删除以下 css 的 css:

 .vcenter {
    height: 375px;
    line-height: 300px;
}

.vcenter input, .vcenter span{
    display: inline-block;
    vertical-align: middle;
}

并更新为简单的:

.vcenter {
    margin-top:50px;
}

    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 vcenter">
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
  </div>
</div>