0

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ttmt
  • 5,822
  • 27
  • 106
  • 158
  • Move `vertical-align: middle;` to the table-cell: http://jsfiddle.net/hashem/bva700wx/4/ – Hashem Qolami Sep 27 '14 at 11:57
  • 1
    Specifically for vertical alignment with Twitter bootstrap, you could refer to: [vertical align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3). – Hashem Qolami Sep 27 '14 at 11:59
  • This seems to work between 750px - 615px but above that the layout is blown – ttmt Sep 27 '14 at 12:07
  • This is because twitter bootstrap applies `float: left` to all columns. You could override that by giving the columns `float: none`: http://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 Sep 27 '14 at 12:12
  • I don't like using css tables because of problems they cause but can you suggest another way to do this? – ttmt Sep 27 '14 at 12:13
  • In my second comment, I've posted a link to a relevant topic. – Hashem Qolami Sep 27 '14 at 12:14
  • Better to stay away from CSS tables, just nest tables into bootstrap divs and plan your media queries accordingly? – Bruno Vincent Feb 02 '17 at 00:10

1 Answers1

1

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

Radu Andrei
  • 1,075
  • 10
  • 19