ブートストラップ入力グループを使用して真ん中に垂直方向に整列する方法

Question

私は垂直整列の方法について、他の記事を見てきました。それはうまく動作します。

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

問題I：ここに見られるように

私は何をしようとしていることは、垂直のdivに整列されている標準のブートストラップ（http://getbootstrap.com/components/#input-groups-buttons）ごとに「行く」ボタンで検索バーを作成することです持っている私は垂直に整列するために、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