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


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.