How to center logo or splash (tableless). - Webmaster Forum - Web Design, Programming and SEO forums

10-25-2005, 12:11 PM

Sam Granger

Status: Request a custom title
Join date: Feb 2005
Location: The Netherlands
Expertise:
Software:

Posts: 2,616

iTrader: 19 / 88%

Sam Granger is on a distinguished road

How to center logo or splash (tableless).

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:

HTML Code:

width:200px;

Change 200px into the width of your logo. Eg. if your logo is 346 pixels wide, you should have:

HTML Code:

width:346px;

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!