how to middle vertical-align using bootstrap input-group
<p>I've looked at other posts on how to vertical-align: middle with bootstrap.  That works fine.  </p>

<p>What I'm trying to do is to create a search bar with a "go" button as per standard bootstrap (<a href="http://getbootstrap.com/components/#input-groups-buttons" rel="nofollow">http://getbootstrap.com/components/#input-groups-buttons</a>) that is vertically aligned in a div as seen here:</p>

<pre><code>&lt;div class="col-lg-6 vcenter"&gt;
  &lt;div class="input-group"&gt;
    &lt;input type="text" class="form-control" placeholder="Search for..."&gt;
    &lt;span class="input-group-btn"&gt;
      &lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;&lt;!-- /input-group --&gt;
&lt;/div&gt;&lt;!-- /.col-lg-6 --&gt;
</code></pre>

<p>Problem I have is the minute I try to add in css to vertically align it, everything goes crazy and it's no longer aligned:</p>

<pre><code>.vcenter {
    height: 375px;
    line-height: 300px;
}

.vcenter input, .vcenter span{
    display: inline-block;
    vertical-align: middle;
}
</code></pre>

<p>Any help would be appreciated.</p>