Vertically align text and image with display table

Question

I have a jsfiddle here - http://jsfiddle.net/bva700wx/5/

It's a really simple bootstrap layout.

It's 2 row's that contain cols with an image and one with text.

The text and the image can vary in height.

I need the height of both columns to be the same.

If the text is taller I need the image col to the same height

If the image col is taller I need the text col to be the same height.

I then need the vertically center the image and the text.

I thought this would be easy with display: table; and display: tabel-cell;

Any see what I doing wrong

        <div class="container">

            <div class="row">



                <div class="col-sm-3 box text-center">
                    <img src="http://placehold.it/100x50" />
                </div>

                <div class="col-md-9 box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>    
                </div>


            </div>

            <div class="row">

                <div class="col-sm-3 box text-center">
                    <img src="http://placehold.it/100x150" />
                </div>

                <div class="col-md-9 box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    </p> 
                </div>

            </div>  

        </div>

Move vertical-align: middle; to the table-cell: jsfiddle.net/hashem/bva700wx/4 — Hashem Qolami
Specifically for vertical alignment with Twitter bootstrap, you could refer to: vertical align with bootstrap 3. — Hashem Qolami
This seems to work between 750px - 615px but above that the layout is blown — ttmt
This is because twitter bootstrap applies float: left to all columns. You could override that by giving the columns float: none: jsfiddle.net/hashem/bva700wx/7 However note that CSS tables have their own cons/limitations. You should use them with care. You may run into trouble if you don't aware of that. — Hashem Qolami
I don't like using css tables because of problems they cause but can you suggest another way to do this? — ttmt

Radu Andrei Radu Andrei · Accepted Answer · 2014-09-27T13:12:40

Floating interferes with vertical alignment. I modified your fiddle to give you a working example.

Vertically align text and image with display table

1 Answers