I was just asked to help someone center a logo/splash on their website so I thought I'd share the code since it might come in handy for others.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<title>Your page title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {
height:100%;
margin: 0px;
background: url(bg.gif);
}
img {
position: absolute;
top: 50%;
margin-top: -50px;
}
.center {
height:100%;
width:200px;
margin-left:auto;
margin-right:auto;
position:relative;
}
</style>
</head>
<body>
<div class="center"><img src="logo.jpg" width="200" height="100" /></div>
</body>
</html>
</body>
</html>
This is the code I used. I'll explain a bit what you need to edit. First of all, you need to edit the following part:
HTML Code:
margin-top: -50px;
The value should be the same as your logo's height devided by 2. In this case, the logo is 100 pixels high. If your logo is for example 260 pixels high you would replace this code with the following:
HTML Code:
margin-top: -130px;
Next, we need to edit the following:
Change 200px into the width of your logo. Eg. if your logo is 346 pixels wide, you should have:
Now you need to edit this:
HTML Code:
<img src="logo.jpg" width="200" height="100" />
Change the source of your logo/splash image and the width & height.
Last but not least, change the location of the background image!
