Advanced Search

Center an image vertically and horizontally in a container

/ Published in: CSS
Save to your folder(s)
Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The markup:
  2.  
  3. <div class="wraptocenter"><span></span><img src="..." alt="..."></div>
  4.  
  5. The CSS:
  6.  
  7. <style type="text/css">
  8. .wraptocenter {
  9.     display: table-cell;
  10.     text-align: center;
  11.     vertical-align: middle;
  12.     width: ...;
  13.     height: ...;
  14. }
  15. .wraptocenter * {
  16.     vertical-align: middle;
  17. }
  18. /*\*//*/
  19. .wraptocenter {
  20.     display: block;
  21. }
  22. .wraptocenter span {
  23.     display: inline-block;
  24.     height: 100%;
  25.     width: 1px;
  26. }
  27. /**/
  28. </style>
  29. <!--[if lt IE 8]><style>
  30. .wraptocenter span {
  31.     display: inline-block;
  32.     height: 100%;
  33. }
  34. </style><![endif]-->

URL: http://www.brunildo.org/test/img_center.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.