Advanced Search

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

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>
  2. <div>&nbsp;<img src="placeholder.gif" width="90" height="80"  />&nbsp;</div>
  3. <div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>
  4.  
  5. div {
  6. 	float: left;
  7. 	text-align: center;
  8. 	width: 150px;
  9. 	height: 150px;
  10. 	margin: 5px;
  11. 	border: 1px solid #ccc;
  12. 	font-size: 1em;
  13. 	line-height: 148px;
  14. 	}
  15.  
  16. div img {
  17. 	margin-top: expression(( 150 - this.height ) / 2); 
  18. 	}
  19.  
  20. html>body div img {    /*hidden from IE 5-6 */
  21. 	margin-top: 0; /* to clean up, just in case IE later supports valign! */
  22. 	vertical-align: middle;
  23. 	}
  24.  
  25. Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.