Newbie Div issue

HTML & CSS
1

Hi guys,

I’m a New User of CSS and seem to be havign a spot of bother making a <div> centre. I was under the impression that I set margin:auto; in my css (have also tried margin-left (and right):auto; ) however for some reason the <div> is stayed left justified.

Please can you assist before i go mad! ( well madder)

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>TDP Surveyors - Surveying & Valuations experts in Cornwall</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/css/tdp.css"
</head>

<body class='background'>
	<div class="body"> 
			<div class="logo"><img src="/images/TDp-Square-green-txt1.jpg" /></div>

	
	</div>

</body>
</html>

with associated CSS

.background{
background-color: #333333;
}

.body { 
	padding: 3px; 
	border: 1px solid black;
	background-color: white; 
	top:5px;
	width:1400px;
	height:1000px;
	margin:auto;
	}

the weirdest thing is that wheni preview in browser from dreamweaver it works, but when uploaded and viewed via the web it becomes justified tot he left!?!?!?

2

Your <link> element isn’t closed. That might be causing some kind of a problem. If you only want to center an image, one very simple way to do it would be.

img { display: block; margin: 0 auto; }

Because img elements are naturally inline, you could also give its parent element, text-align: center.

3

It is now possible i may go find a dark corner and spend a while crying!!

Ijj - my sanity thanks you!

4

The DIV is centred because you gave it a width and it is a ‘block’ so could make use of the margin auto. Obviously like was mentioned the image won’t be centred as-well with it being inline neither would any contained text. Also don’t trust programs such a Dreamweaver to show you the actual final results as they are just editors and not actually the browser itself.