Vertically aligning a header element and button toolbar in bootstrap

Question

I'm using a Bootstrap 3 button toolbar in my page and am running into an issue with vertically aligning the button toolbar and the label for the buttons- they appear to be "bottom aligned" but I'd prefer them to be vertically centered.

<div id="share-privacy-selector">
  <label>Sharing:</label>
  <div class="btn-toolbar" role="toolbar" style="display: inline-block;">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Public</button>
      <button type="button" class="btn btn-default">Hidden</button>
      <button type="button" class="btn btn-default">Private</button>
    </div>
  </div>
</div>

This produces the following:

Here's a jsBin with Bootstrap included so you can see the issue.

Should I use some element besides a for my label? If not, what kind of styling can I add to the label, the parent div, or the div.btn-toolbar so that everything is vertically aligned?

Answer 1

Try using vertical-align: bottom on both the label and the toolbar.

The code to add to your jsBin:

#share-privacy-selector > .btn-toolbar,
#share-privacy-selector > label {
    vertical-align: bottom;
}

TIP: Normally it would be vertical-align: middle, but in your case it positions the label higher than the toolbar.

Check out the snippet:

#share-privacy-selector > .btn-toolbar,
#share-privacy-selector > label {
  vertical-align: bottom;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
rel="stylesheet" type="text/css" />

<div id="share-privacy-selector">
  <label>Sharing:</label>
  <div class="btn-toolbar" role="toolbar" style="display: inline-block;">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Public</button>
      <button type="button" class="btn btn-default">Hidden</button>
      <button type="button" class="btn btn-default">Private</button>
    </div>
  </div>
</div>