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


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



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.