How to middle-align this text next to a button?

Question

jsFiddle

screenshot

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.

Answer 1

You could use css display: table and display: table-cell and vertical-align: middle.

HTML

<div class="box-header clearfix">
    <div class="left-cell">
        <h6>General Information</h6>
    </div>
    <div class="right-cell">
        <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button>
    </div>
</div>

CSS

.box-header {
    border-bottom: 1px solid #aac7ef;
    padding-bottom: 5px;
    display: table;
    width: 100%;
}
.left-cell {
    display: table-cell;
    vertical-align: middle;
}
.right-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Demo

Answer 2

vertical-align only applies to two type of objects: 1, table cells and 2, inline elements.

It has no bearing on any other type of HTML element.

It's not that it's 'spotty' or 'a problem' it's just that it doesn't do what most people want it to do.

Ideally, you'd avoid vertically aligning text altogether, but sometimes we need to. There are various ways to do it and as for deciding which way to do it, it usually depends on the particular situation you're working in.

In this situation, if you can rely on it being one line of text, I think your best bet is to just optically adjust with either some extra top padding, or position-relative and drop it down a few pixels.