How to vertical align image inside div

css image html vertical-alignment
MonsterMMORPG picture MonsterMMORPG · Sep 7, 2011 · Viewed 130k times · Source

How can you align an image inside of a containing div?

Example

In my example, I need to vertically center the <img> in the <div> with class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame's height is fixed and the image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on Internet  Explorer 7 and later, WebKit, Gecko.

See the jsfiddle here.

Answer

Related questions

Bootstrap Vertical Align Image

On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?

Read More
Vertical align an image and a multiline text

I´m trying to align an image and a text vertically: +-------------------------+ -- Viewport | Text text text | | +-----+ text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text | +-------------------------+ This works fine, if the text is …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More