Vertically Center - with unknown height - css

Question

I have two div's side by side. On the left is an image, on the right are inputs.
The image varies depending on what the user uploads.
How can I vertically centre align the image and the inputs? I would like the inputs to appear vertically centre to the image.
Both the img and inputs have their own container:
<div class="img-container">
<div class="data-container">
Fiddle:
http://jsfiddle.net/vbLht/

Answer 1

Remove float:left and try display CSS Rule
.img-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
.data-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
Fiddle
Note: You need to set <!-- --> to your mark-up after inline divs as css inline rule will leave white-space between 2 elements, Though this an awkward way but if you don't want to write that crack then you've to adjust width.
Or
Set your li style to display:table with the above CSS Code
li{
display:table; /*remove float*/
}
.img-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
.data-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
Hope this is clear :)

Answer 2

Flexbox makes this very easy.
Just wrap the child elements you want to vertically center in a wrapper div with:
.wpr {
display:flex;
align-items: center; /* align vertical */
}
FIDDLE
Browser support is good in modern browsers - caniuse..
but if CSS3 isn't an option, the display:table approach (As mentioned in the other answer) is fine.