Bootstrap buttons with same height and vertically-centered text

Question

I have 3 Bootstrap buttons side-by-side, but one of them has a line break (I'm modifying them with white-space: normal). I need them all to have the same height, and vertical-centered text.

I have them like this:

And I need them like this:

I can't figure out how to do this. Any ideas?

Answer 1

would something like this work for you?

.option-button {
    height:100%;
}

.media-object {
    height: 100px;
}

<br/><br/>
<div class="media-object pull-left">
    <button class="btn btn-info option-button">A</button>
    <button class="btn btn-primary option-button">A<br/>B<br/>C</button>
    <button class="btn btn-info option-button">A</button>
</div>            

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

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

you can use height: 100%; on the buttons but with that, you need to set the height of the containing div. hope this helps!