vertical align button in a row [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 7 years ago.
I am trying to vertically align a button within a row (bootstrap). I can't get it to work out... any tips?
<div class="form-group row">
<div class="col-sm-6">
<input class="form-control" name="new-project" value="" placeholder="Type project name"></input>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-sm" style="position: absolute; vertical-align: middle">Save</button>
</div>
</div>

Answer 1

Since you're using a small button you should also use a small input. Using an input-group is also an option.
See example Snippet at FullPage.
body {
padding-top: 50px;
}
.red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2 red">
<input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
</div>
<div class="col-sm-2 red">
<button type="button" class="btn btn-sm">Save</button>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2 red">
<div class="input-group">
<input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
<span class="input-group-btn">
<button type="button" class="btn btn-sm">Save</button>
</span>
</div>
</div>
</div>
</div>
</div>