22 Apr, 2010
Align an image in center and middle using CSS
Here’s a snippet of CSS and HTML code that aligns an image in center (horizontally) and middle (vertically). Tested in Firefox, IE, Chrome and Safari.
CSS
#enter {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
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) */
width: 260px; /* same as the image width */
}
#enter span a {
display: block;
width: 260px;
height: 240px;
margin: 0 auto;
position: relative;
background: transparent url(images/enter.jpg) 0 0 no-repeat;
text-indent: -5000em;
outline: 0;
}
HTML
<body id="homepage">
<div id="enter">
<span><a href="/home">Enter Site</a></span>
</div>
</body>
Found this article useful? Share it with your friends:
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Other similar posts that you might be interested in:
- Framebar (like diggbar) example in html and css with no javascript
- How to use hi-res images in web apps for iPhone4
- How to style a Submit button in CSS – Example 2
- How to style a Submit button in CSS
- Transitional vs. Strict
- Some simple but effective CSS rules for IE 6
- Top 10 jQuery Mobile Code Snippets that you need to know
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
