CSS - Why can't I vertical align this image in this div?

Question

I'm attempting to use the line-height method to v-align an image within a div.

I do not understand why it's not working.

This method has been gone over multiple times on StackOverflow.

If you simply replace the img with text, the text v-aligns without problem.

<div class="image_wrapper">
    <img src="http://requestaweb.com/wp-content/uploads/2014/05/css.png">
</div>

.image_wrapper {
    height: 400px;
    line-height: 400px;
    vertical-align: middle;
    background-color: gray;
    text-align: center;
}
img {
    height: 200px;
}

http://jsfiddle.net/Nikzilla/q3Lu8nrm/1/

Answer 1

Change your css like this

.image_wrapper {
    height: 400px;
    line-height: 400px;

    background-color: gray;
    text-align: center;
}
img {
    height: 200px;
    vertical-align: middle;
}

This works.. I've tried..

Answer 2

Image need to know how to align itself also add a more strict CSS rule instead of adding a generic rule for img tag.

.image_wrapper {
height: 400px;
line-height: 400px;
vertical-align: middle;
background-color: gray;
text-align: center;
}

.image_wrapper img {
    height: 200px;
    vertical-align: middle;
}

Cheers !!