[jsFiddle](http://jsfiddle.net/TpqD8/1/)

**screenshot**

![](https://i.imgur.com/PGjVG.png)

**html**

```
<div class="client-box">
  <div class="box-header clearfix">
    <h6 class="pull-left">General Information</h6>
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button>
  </div>
  <p>box content</p>
</div>

```

How can I get the header `<h6>` vertically-centered with respect to the Edit button?

Putting `vertical-align` on the `box-header` 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.