how to middle vertical-align using bootstrap input-group - css

Question

I've looked at other posts on how to vertical-align: middle with bootstrap. That works fine.
What I'm trying to do is to create a search bar with a "go" button as per standard bootstrap (http://getbootstrap.com/components/#input-groups-buttons) that is vertically aligned in a div as seen here:
<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 -->
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:
.vcenter {
height: 375px;
line-height: 300px;
}
.vcenter input, .vcenter span{
display: inline-block;
vertical-align: middle;
}
Any help would be appreciated.

Answer 1

Please refer the code:
Remove the css following css:
.vcenter {
height: 375px;
line-height: 300px;
}
.vcenter input, .vcenter span{
display: inline-block;
vertical-align: middle;
}
and update as simple:
.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>