如何使用引导输入组进行中间垂直对齐答案

【问题标题】：how to middle vertical-align using bootstrap input-group如何使用引导输入组进行中间垂直对齐
【发布时间】：2016-07-26 09:52:58
【问题描述】：

我查看了有关如何垂直对齐的其他帖子：中间与引导。这很好用。

我要做的是根据标准引导程序 (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;
}

任何帮助将不胜感激。

【问题讨论】：

您是否希望输入和按钮都居中对齐？
是的。基本上希望它看起来是文档中的引导示例。

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

更新 Css

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

Demo Link

【讨论】：