Align controls in navbar Bootstrap - html

Question

I am using Bootstrap 3 in my web application , and below html produces the layout depicated in the image
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" [routerLink]="['']" routerLinkActive="active" >Books & NoteBooks</a>
</div>
<ul class="nav navbar-nav">
<li ><a [routerLink]="['']">Home</a></li>
<li *ngFor="let category of categories">
<a [routerLink]="['./acategories' ,category.name , 'products']" routerLinkActive="active">{{category.name}}</a>
</li>
<li><a [routerLink]="['./acart']" routerLinkActive="active">
<span *ngIf="cartCount > 0" class="badge">{{cartCount}}</span>
<span class="glyphicon glyphicon-shopping-cart"> Bag</span></a></li>
<li><a [routerLink]="['./aorders']" routerLinkActive="active">Order Details</a></li>
<li><a [routerLink]="['./about']" routerLinkActive="active">About</a></li>
<li> > > > </li>
</ul>
<form class="form-inline" (ngSubmit)="onSearch()">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Item Name">
</div>
</div>
<input type="submit" class="btn btn-primary" value="Search"/>
</form><br>
</div>
Now I would like to have text box and search button vertical aligned middle , any idea what needs to be modified.

Answer 1

You can try with padding-top and padding-bottom. Check out working solution here jsbin
Hope this will help you.

Answer 2

You can try using the .navbar-form class along with the .form-inline class as:
<form class="form-inline navbar-form" role="form" (ngSubmit)="onSearch()">
<div class="form-group">...
After this, maybe you can get rid of the <br> tag after the form closing tag.
Also, if you want to align the Search box and button to the right corner, you can use .navbar-right as well:
<form class="form-inline navbar-form navbar-right" role="form" (ngSubmit)="onSearch()">
<div class="form-group">...