Vertical align button middle next to text

Question

I am trying to vertically align the button to the middle, so it fits better with the text. I have tried center-block and text-center without any luck. I would like a generic solution so I do not hard-code margin, padding and similar.

Here is my fiddle: http://jsfiddle.net/jhqjumgL/5/ And my code:

<h3>FMUs
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</h3>

Answer 1

You can use Flexbox

h3 {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>FMUs
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</h3>

Answer 2

You could wrap the "FMUs" text in an element and vertical-align that as well:

h3 > span {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h3><span>FMUs</span>
      <button type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </h3>

The vertical-align property is relative to siblings, not to the container.