title: Floated div not aligning in the middle vertically?
body: <p>I floated the <code>search_and_avatar</code> div right, and used <code>display</code> and <code>vertical-align</code> properties to align it in middle of parent container. But it sites on the bottom. Why is that?</p>
  
  <p>Here is the complete code in <a href="https://jsfiddle.net/sd2eqkuc/" rel="nofollow">fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;CSS-Tricks&lt;/h1&gt;
      &lt;nav id="main_nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;div id="search_and_avatar"&gt;
      &lt;form action="index.html" method="post" id="search_form"&gt;
        &lt;input type="text" id="search" name="search"&gt;
      &lt;/form&gt;
      &lt;img src="images/avatar.png"&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
      background-color:#151515;
      overflow:hidden;
      height: 100px;
  }
  
  header h1, img, #search_form {
      float:left;
  }
  
  #main_nav a {
      color:#FFF;
      text-decoration:none;
  }
  
  
  
  header img {
      width:35px;
      display: table-cell;
      vertical-align: middle;
  }
  
  #search_and_avatar {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      display: table;
      display: table-row;
      float:right;
  }
  
  header form {
      text-align:right;
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>