title: how to middle vertical-align using bootstrap input-group
body: <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>