Return to Snippet

Revision: 21237
at December 7, 2009 14:54 by justinseiter


Initial Code
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="90" height="80"  />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>

div {
	float: left;
	text-align: center;
	width: 150px;
	height: 150px;
	margin: 5px;
	border: 1px solid #ccc;
	font-size: 1em;
	line-height: 148px;
	}

div img {
	margin-top: expression(( 150 - this.height ) / 2); 
	}

html>body div img {    /*hidden from IE 5-6 */
	margin-top: 0; /* to clean up, just in case IE later supports valign! */
	vertical-align: middle;
	}
	
Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.

Initial URL
http://ultimorender.com.ar/funkascript/beta/css/vertical_center.htm

Initial Description

                                

Initial Title
Center an Image Inside a div, Vertical and Horizontal, Without Knowing the Image's Size

Initial Tags

                                

Initial Language
CSS