Advanced Search

Align image in the middle and center of the page

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

Expand | Embed | Plain Text

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.