Advanced Search

Centering (horizontally and vertically) an image in a box

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

Expand | Embed | Plain Text

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. </style>
  23. <!--[if lt IE 8]><style>
  24. .wraptocenter span {
  25.     display: inline-block;
  26.     height: 100%;
  27. }
  28. </style><![endif]-->
  29. <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.