How to vertically center bootstrap 3 rows and columns?

Question

I've tried several posted solutions to get this to work, but can't seem to make it happen. What am I doing wrong here?

I want the IMG, P & BUTTON elements to be vertically centered in their divs beside each other [as opposed to stacked] as well as the row.

Here's what I have so far:

<div class="container rider">

    <div class="row">

        <div> 
            <div class="col-sm-4 col-xs-12 left">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 center">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 right">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>

    </div>

</div>

And the CSS overriding a stock Bootstrap 3 CSS.

.rider > .row , .rider > .row > div, .rider > .row > div > div {
    vertical-align:middle;
    }

.rider img, .rider p, .rider button {
    display:inline-block;
}
.rider img {
    float:left;
}
.rider p {
    width: 140px;
    margin: 0;
    padding: 0;
    }

.rider button {
    float:right;
}

*note: the IMG, P & BUTTON tags should be beside one another in each column, not stacked.

I can't tell from your code snippet but if your images are too large those will force the paragraph and button elements to the next line. Can you create a [jsFiddle](http://jsfiddle.com) the image URL location included? — Matt Smith, Mar 04 '14 at 22:36
Your BS cols shouldn't be wrapped in other divs. Also, this question has been asked many times before: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Carol Skelly, Apr 17 '15 at 21:50

score 1 · Answer 1 · answered Apr 17 '15 at 22:01

Use Bootstrap's media-middle class. That way you can elimated the extra CSS.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
    </div>
</div>

Demo: http://codeply.com/go/7tHkfiSWT4

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Here is a PEN, I created a while back for a similar Question. I used 3 different methods to align vertically in the middle.

translate
display:table-cell
line-height

edited May 23 '17 at 12:22

Community

1
1

answered Mar 04 '14 at 22:48

Lokesh Suthar

3,201
1
16
28

score 0 · Answer 3 · answered Mar 05 '14 at 01:16

0

Just use following CSS.

.rider img,
.rider p,
.rider button {
    display: inline-block;
    vertical-align: middle;
}

answered Mar 05 '14 at 01:16

Iqbal Kabir

1,518
10
16

How to vertically center bootstrap 3 rows and columns?

3 Answers3