Question

我已经查看了有关如何纵向对齐的其他帖子：中间有引导程序。这很好。

我要做的是创建一个带有＆＃34; go＆＃34;的搜索栏。按照标准引导程序（http://getbootstrap.com/components/#input-groups-buttons）按钮在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>

Answer 2

更新Css

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

Demo Link

如何使用bootstrap输入组进行中间垂直对齐

2 个答案: