Homepage Logo imgage center error

**successfulfail** · Dec 12, 2012 02:33

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

Current CSS code:

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:

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)

**chris.upjohn** · Dec 12, 2012 03:51

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.

http://jsfiddle.net/DtLve/1/

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

**ralph.m** · Dec 12, 2012 03:53

Originally Posted by successfulfail

With this current coding my logo image is not placed at the center

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).

Edit:

Beaten by Chris.

**successfulfail** · Dec 12, 2012 04:03

All file format of the images I used were png.

Here is one of them:
logotest.png

You probably won't be able to see the text since the text color is white...

**successfulfail** · Dec 12, 2012 04:07

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

Code:

<!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>

**ralph.m** · Dec 12, 2012 04:13

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

Code:

.logo {
width: 440px;
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.

Code:

.logo img {width: 440px;}

**successfulfail** · Dec 12, 2012 04:18

Problem solved. Thank you.

User Tag List

Thread: Homepage Logo imgage center error

Thread Tools

Display

Homepage Logo imgage center error

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions