Vertically center responsive image in a bootstrap column

Question

I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.

I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.

The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.

My HTML:

<div class="container-fluid">
    <div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel">
                Some content
            </div>
        </div>

        <div class="col-md-2">
            <img src="images/myimage.png" class="img-responsive center-block">
        </div>

        <div class="col-md-5">
            <div class="panel>
               Some content
            </div>
        </div>
     </div>
     </div>
 </div>

score 17 · Answer 1 · answered Dec 15 '14 at 17:40

17

Here's an option using transform:

html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */

http://www.bootply.com/YG8vpg1rIf

answered Dec 15 '14 at 17:40

Patrick

872
1
5
14

Thanks - in my page, this vertically aligns the center of the image within the center `col-md-2` with the **tops** of the columns on either side (specifically: the top of each panel element in either column). Any ideas? – user84756 Dec 16 '14 at 03:28
Do you have a link so I can look specifically at your code? It sounds to me like this is an alignment problem with the panel styles... but it's hard to tell without looking at it. – Patrick Dec 16 '14 at 11:49
I think this only works if all parent elements are `height:100%` – AnalogWeapon Apr 15 '16 at 03:03

score 6 · Answer 2 · answered Dec 15 '14 at 19:26

6

You can overcome the vertical align problem by using css Flexbox.

Add the class "vertical_center" to the parent div.

Then add the following css

.vertical_center {
    display: flex;
    align-items: center;
}

answered Dec 15 '14 at 19:26

Anupam Basak

1,503
11
13

1

If I apply `.vertical_center` to the `
` it destroys the responsiveness at smaller screen sizes, i.e. when the columns collapse onto separate rows. Should I apply the `.vertical_center` class somewhere else, or structure it differently? Thank you.
– user84756 Dec 16 '14 at 03:27
As you said earlier, you wanted to vertically center the elements of the columns. I think you should put it on the column instead of the row. Would you be able to post a complete fiddle so that I can see what is happening? – Anupam Basak Dec 16 '14 at 03:50
It works for me if i put the `vertical_center` on the `col` and on the `img` I put the class `center-block` – iarroyo Jun 28 '16 at 14:49
You should probably mention that flexbox is not supported with IE < 10 and even > 9 there are a lot of bugs. – dft Mar 30 '17 at 17:12

score -1 · Answer 3 · answered May 05 '19 at 09:52

Hope this will solve your problem. Use following CSS property for making the image vertically centered

img { vertical-align: middle; }

For horizontal alignment use class name text-center of bootstrap along with the other class name of your div if yu have. Like,

<div class="col-md-2 text-center"> ... </div>.

It will make the content of the div horizontally centered.

Vertically center responsive image in a bootstrap column

3 Answers3