Align image in the middle and center of the page


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



Copy this code and paste it in your HTML
  1. #enter {
  2. position: absolute;
  3. text-align: center;
  4. left: 50%;
  5. top: 50%;
  6. margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */
  7. width: 260px; /* same as the image width */
  8. }
  9.  
  10. #enter span a {
  11. display: block;
  12. width: 260px;
  13. height: 240px;
  14. margin: 0 auto;
  15. position: relative;
  16. background: transparent url(images/enter.jpg) 0 0 no-repeat;
  17. text-indent: -5000em;
  18. outline: 0;
  19. }
  20.  
  21.  
  22.  
  23.  
  24. <body id="homepage">
  25. <div id="enter">
  26. <span><a href="/home">Enter Site</a></span>
  27. </div>
  28. </body>

URL: http://eisabainyo.net/weblog/2010/04/22/align-an-image-in-center-and-middle-using-css/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.