title: Vertical align not working button
body: <p>I have html that looks like:</p>
  
  <pre><code>&lt;header&gt;
     &lt;div class='content'&gt;
        &lt;div class='pull-left'&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
          &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
        &lt;/div&gt;
  
        &lt;div class='pull-right'&gt;
          &lt;a href='#'&gt;
            &lt;button class='edit'&gt;Edit Book&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The h1 will always be there, but the h2 is optional (so the height is dynamic). What I'm trying to do is vertically center the Edit Book button so it is in the middle of .content. I've tried <code>vertical-align:center</code> on the button, but it doesn't work</p>
  
  <p>EDIT: JSFiddle: <a href="http://jsfiddle.net/v8SfN/" rel="nofollow">http://jsfiddle.net/v8SfN/</a></p>