title: How to middle-align this text next to a button?
body: <p><a href="http://jsfiddle.net/TpqD8/1/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p><strong>screenshot</strong></p>
  
  <p><img src="https://i.imgur.com/PGjVG.png"/></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="client-box"&gt;
    &lt;div class="box-header clearfix"&gt;
      &lt;h6 class="pull-left"&gt;General Information&lt;/h6&gt;
      &lt;button class="btn btn-small pull-right"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/button&gt;
    &lt;/div&gt;
    &lt;p&gt;box content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I get the header <code>&lt;h6&gt;</code> vertically-centered with respect to the Edit button?</p>
  
  <p>Putting <code>vertical-align</code> on the <code>box-header</code> doesn't work. I don't want to hard-code a line-height because I might change the button sizing or something later and then it will break.</p>