Center an image vertically and horizontally in a container


 / Published in: CSS
 

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

Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.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]-->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: solange on April 1, 2019

The code is well written, our employees also do assignments and college essay writing service as well, quickly with high quality. This is an important factor in learning to learn how to write good code.

You need to login to post a comment.