CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Casper Thule Hansen
Casper Thule Hansen

Reputation: 1550

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>

Upvotes: 5

Views: 3016

Answers (4)

ryachza
ryachza

Reputation: 4540

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.

Upvotes: 5

PeterS
PeterS

Reputation: 2944

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

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 9

Heidel
Heidel

Reputation: 3254

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

Upvotes: 0

Related Questions