user2954587 user2954587 - 2 months ago 10
CSS Question

Bootstrap 3 vertically align text for btn-group

How can I vertically align a label for a custom button group with a float?

<div class="col-md-12">
<div class="btn-group pull-right" role="group" aria-label="Sort By">
<button class="btn btn-default btn-sm">Friends</button>
<button class="btn btn-default btn-sm">Distance</button>
</div>
<div class="pull-right">
<div>Sort By:</div>
</div>
</div>


I tried
vertical-align: middle
with no luck

JSFiddle

Answer

You can accomplish this with line-height.

.btn-group + .pull-right div {
    line-height:2em;
}
Comments