css - Vertically centering icons and searchbox in a navbar -

I am struggling with how to do this - I need a nave bar in which the icons of both sides and the wide Searchbox between them As I have received it, I can not use the display on the disks: the table-cell is divas correctly and therefore I can not be aligned better than now (using padding and margin - this is not quite a viable option). Can anyone help?

Here's a fiddle:

HTML:

  & lt; Nav class = "navbar navbar-fixed-top" & gt; & Lt; Div class = "formline" & gt; & Lt; Div id = "settingsicondiv" & gt; & Lt; I class = "fa fa-gear fa-2x" & gt; & Lt; / I & gt; & Lt; / Div & gt; & Lt; Div id = "searchicondiv" & gt; & Lt; I class = "fa fa-search fa-2x" & gt; & Lt; / I & gt; & Lt; / Div & gt; & Lt; Div id = "searchboxdiv" & gt; & Lt; Input class = "form-control" type = "text" placeholder = "search" & gt; & Lt; / Input & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  nav {width: 100%; Background color: gray; Padding-Top: 0.5 AM; Text align: center; } .formline {max-width: 40 AM; Margin: 0 auto; } Input {width: 100%; Font-size: 16px; } .fa {color: white; Margin-left: 0.3 AM; Margin-right: 0.3 AM; Margin-top: 0.15em; } #settingsicondiv {float: left; } #searchicondiv {float: right; } #searchboxdiv {text-overflow: ellipsis; White-space: Abrop; Hidden flurry; }   
 
 
 Setting the simple way  display  is all your 3  & lt; Div & gt; From the  to  inline-block  and then vertically align them using  vertical-align: medium . I  
 id = "search box" & gt; By inserting  and 
  before , you have modified your HTML structure slightly. 
 
 
  NAV {width: 100%; Background color: gray; Padding-Top: 0.5 AM; Text align: center; } Input {width: 100%; Font-size: 16px; } .fa {color: white; } #searchboxdiv {text-overflow: ellipsis; White-space: Abrop; Hidden flurry; } Div # settingsicondiv, #searchboxdiv, #searchicondiv {display: inline-block; Vertical-row: middle; } Div #sextboxdiv {width: 50%; }  
 
  & lt; Link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2" 0/ssss/bootstrap.min.css "rel =" stylesheet "/> 
 link href =" http: // cdnjs. Cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css "rel =" stylesheet "/> 
 
    & lt; / div> & lt; / nav & gt;