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/

Probably better to not post a link to a collaborative fiddle next time — Derongan, Aug 07 '14 at 19:08
How the hell do I post the old school shares? All I see is the collaborate button. — Nikita240, Aug 07 '14 at 19:12
Click save, copy and paste the url in the address bar. Why would you need a button for that? — Rick Calder, Aug 07 '14 at 19:14
Did you save? I just made a new one and save gives me an actual link. — Rick Calder, Aug 07 '14 at 19:15
@RickCalder Save button only seems to show up if you're signed in. Not sure when that changed. — Tieson T., Aug 07 '14 at 19:16
possible duplicate of [How to vertically align an image inside div](http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div) — showdev, Aug 07 '14 at 19:32
@RickCalder Just to follow up on the jsFiddle bit; the reason for no anonymous fiddles was apparently to recover from a DDOS attack. They've been re-enabled: https://twitter.com/jsfiddle/status/497083687406956544 (just FYI). — Tieson T., Aug 11 '14 at 08:15

score 2 · Answer 1 · answered Aug 07 '14 at 19:06

2

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..

answered Aug 07 '14 at 19:06

Lal

14,726
4
45
70

Works in fiddle but not on my page, sigh – Nikita240 Aug 07 '14 at 19:24

score 0 · Answer 2 · answered Aug 07 '14 at 19:15

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 !!

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

2 Answers2