Casper Thule Hansen Casper Thule Hansen - 7 months ago 28
HTML Question

Vertical align button middle next to text

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

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

<style type="text/css">
button,
h3 > span,
textarea {
  vertical-align: middle;
}
</style>
<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.