Edit Question - KnowledgeHub

Title Body

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 . .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=

Tags (comma-separated) Cancel