Vertically Center Responsive Image

Question

I am wondering if there is a simple way to vertically center a responsive image.

Please refer to the following jsFiddle: http://jsfiddle.net/persianturtle/yawTb/1/

Answer 1

So, I found something that works exactly as I wanted: http://jsfiddle.net/fmwzT/

The problem is that it ONLY works with bootstrap's newest version 2.3.1 and I have no idea why (I have 2.3.0 on my site).

So now I have answered my question and raised an even bigger question, what is causing this to work?

Note, it does use the following code:

HTML

CSS

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 300px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

NOTE: This does NOT work without Bootstrap's neweste 2.3.1 version.

I will be posting a question to see if anyone knows!