Homepage Logo imgage center error

Hi, I started coding CSS few days ago so I am a very beginner…

Current CSS code:

body
{
	margin: 0;
	height: 100%;
	padding: 0 0 40px;
	background-color: #BBB;
}

.content
{
	width: 960px;
	margin: 0 auto;
	padding: 0 0 80px;
	background-color: #555
}

.logo
{
	width: 440px;
	margin: 40px auto 0;
	position: relative;
	text-align: center;
}

HTML body code:

<body>

	<div class="content">
			<div class="logo">
				<img src="img/logotest.png" />
			</div>
	</div>


</body>

With this current coding my logo image is not placed at the center (middle of “content”) nor the left edge of the image is placed at the center.

Please help me solve this issue. (Please request any additional information you need)

Indeed it should be working bud as I took your above code apart from making one very minor change and it works fine, see the below example link.

If you could please upload the image you’re using as that may yield some light on why it may not be working.

With the code you’ve posted, the image should indeed be centered horizontally. So if that’s not the case, these is some other code interfering with it. You could either post all your page code here (along with the CSS (preferably in <style> tags in the <head>) or post a live link (which is the ideal). :slight_smile:

Edit:

Beaten by Chris. :slight_smile:

All file format of the images I used were png.

Here is one of them:

You probably won’t be able to see the text since the text color is white…

Here is the full HTML coding. For CSS, my original post includes all of my CSS code for the website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/mock.css" type="text/css" />

<title>Web Design Mock</title>

</head>


<body>

	<div class="content">
			<div class="logo">
				<img src="img/logotest.png" />
			</div>
	</div>


</body>

Whoops, there was something in you code messing up the layout. It’s the width on the .logo div:

.logo {
[COLOR="#FF0000"]width: 440px;[/COLOR]
margin: 40px auto 0;
position: relative;
text-align: center;
}

Remove that and you will be OK. There’s no point putting a width on the element if it content (the image) is wider! An alternative would be to set a width on the image itself if you don’t want it to display so wide. E.g.

.logo img {width: 440px;}

Problem solved. Thank you.