...

View Full Version : how do i center everything on the page and inside the divs ?



needsomehelp
11-21-2011, 10:23 AM
I have been playing around with the code and just can not get this image to be in the center of the page.

How do I do this correctly?



<!DOCTYPE HTML>
<html>
<head>

<title>.........</title>

</head>

<body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);">

<div style="width: 760px; align: center;"><img src="images/header4.jpg" alt=""></div>








</body>
</html>

natasha15
11-21-2011, 12:25 PM
align is a deprecated tag.

Use:
<div style="text-align: center;">

Kor
11-21-2011, 01:03 PM
rather use the margin:auto


<div style="width: 760px"><img src="images/header4.jpg" alt="" style="display:block;margin:0 auto 0 auto"></div>


It would be better if you will use CSS classes instead of style...

natasha15
11-21-2011, 01:20 PM
Yep, true Kor! You can use text-align for the image, as that is a quick and dirty way to centre it...

Also, to centre the parent div, need:
style="margin:o auto;"

So it would be:

<code>
<div style="width:780px; margin:0 auto;">
<img src="images/header4.jpg" alt="" style="display:block;margin:0 auto;">
</div>
</code>

needsomehelp
11-21-2011, 01:39 PM
EDIT *


ok i have been playing around a little more and now got this far..


<!DOCTYPE HTML>
<html>
<head>

<title>.........</title>

</head>

<body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);">

<div style="width: 100%; height: 100%; text-align: center; margin: 0 auto;">
<div style="width: 100%; height: 192px; text-align: center; margin: 0; background-image: url(&quot;images/header4.jpg&quot;); background-repeat: no-repeat; background-position: center;"></div>
<div style="width: 100%; height: 100px; text-align: center; margin: 0; background-image: url(&quot;images/navi.jpg&quot;); background-repeat: no-repeat; background-position: center;">nav</div>
<div style="width: 100%; height: 100%; text-align: center; margin: 0; background-image: url(&quot;images/pgbackgrd.jpg&quot;); background-repeat: repeat-y; background-position: center;">MAIN<br><br>CONTENT,<br><br>IMAGE<br><br>NEEDS<br><br>TO<br><br>REPEAT<br><br>DOWN<br><br>PAGE.</div>
<div style="width: 100%; height: 100px; text-align: center; margin: 0; background-image: url(&quot;images/bottombanner.jpg&quot;); background-repeat: no-repeat; background-position: center;"></div>
</div>


</body>
</html>


viewing in Firefox (*and IE) i get a gap between the images. how do i get rid of this gap ?

Excavator
11-21-2011, 03:22 PM
Hello needsomehelp,
That is good advice from Kor, you should use attached or linked CSS instead of the inline styles you are working with now.

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum