Centering (horizontally and vertically) an image in a box


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



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

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.