advanced code snippet search

Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Absolute Center (Vertical & Horizontal) an Image

 / Published in: CSS
 
Expand | Embed | Plain Text 
  1. /* CSS background-image Technique: */
  2.  
  3. html {
  4. 	width:100%;
  5. 	height:100%;
  6. 	background:url(logo.png) center center no-repeat;
  7. }
  8.  
  9. /* CSS + Inline Image Technique: */
  10.  
  11. img {
  12. 	position: absolute;
  13. 	top: 50%;
  14. 	left: 50%;
  15. 	width: 500px;
  16. 	height: 500px;
  17. 	margin-top: -250px; /* Half the height */
  18. 	margin-left: -250px; /* Half the width */
  19. }
  20.  
  21. /* Table technique: */
  22.  
  23. html, body, #wrapper {
  24. 	height:100%;
  25. 	width: 100%;
  26. 	margin: 0;
  27. 	padding: 0;
  28. 	border: 0;
  29. }
  30. #wrapper td {
  31. 	vertical-align: middle;
  32. 	text-align: center;
  33. }
  34.  
  35. /* HTML */
  36.  
  37. <html>
  38. <body>
  39. 	<table id="wrapper">
  40. 		<tr>
  41. 			<td><img src="logo.png" alt="" /></td>
  42. 		</tr>
  43. 	</table>
  44. </body>
  45. </html>

Report this snippet  

You need to login to post a comment.