title: angular material md-input-container won't center vertically
body: <p>I'm using <a href="https://material.angularjs.org" rel="nofollow noreferrer">angular material</a> for designing my project. Now I want an input for searching in my toolbar, just like youtube.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;md-list flex-offset="10"&gt;
      &lt;md-list-item layout-align="start center"&gt;
          &lt;md-input-container md-no-float flex&gt;
              &lt;input type="text" placeholder="Search" flex&gt;
          &lt;/md-input-container&gt;
          &lt;md-button&gt; test &lt;/md-button&gt;
      &lt;/md-list-item&gt;
  &lt;/md-list&gt;
  </code></pre>
  
  <p>The toolbar tags before my md-list looks like this:</p>
  
  <pre><code>&lt;md-toolbar layout="row" flex style="max-height: 60px;"&gt;
      &lt;div class="md-toolbar-tools"&gt;
  </code></pre>
  
  <p>What I've tried:</p>
  
  <ul>
  <li>Wrapping it inside a normal div and setting layout-align to start, center.</li>
  <li>Using a form tag to wrap the input container.</li>
  </ul>
  
  <p>Problem:</p>
  
  <p>The input group won't center vertically, and this is what I'm after. Every other directive I've tried centers perfectly like the md-button. </p>
  
  <p>Is this a bug or am I doing something wrong?</p>
  
  <p>Edit (Added picture comparing, md-input-container, input, md-button):</p>
  
  <p><a href="https://i.stack.imgur.com/niTGD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/niTGD.png" alt="enter image description here"></a></p>