垂直对齐按钮中间文本旁边

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.

Answer 3

What may be of interest is to divide the area up further so you have more control:

    <h3>
  <div class="container">

  <span class="text"> 
   FMUs

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

And the styles:

button,
textarea {
  vertical-align: middle;
}
.container {
  display: inline-block;
  height: 100px;
}
.text, .button {
  vertical-align: middle;
}

What this allows is a better control over your elements and means that you can specify better position as a result.

The fiddle for you to try is here:

fiddle

Answer 4

You can add margin-bottom css-property to button element, for example margin-bottom: 5px; http://jsfiddle.net/jhqjumgL/26/