2 replies [Last post]
doxx
Offline
newbie
Last seen: 17 years 39 weeks ago
Joined: 2004-08-26
Posts: 2
Points: 0

Let's say we have a DIV looking like this:

<div id="banner">
<img src="............." />
</div>


Inside the DIV you can obviously see there is a picture that will be displayed as a banner.

Using CSS positioning we can set this DIV anywhere on the screen using the bottom, left, right, and top of the page as a reference.

However, how would I set it up so that the "banner" DIV is centred horizontally on the screen?

loudsox04
Offline
Regular
Boston, MA
Last seen: 17 years 46 weeks ago
Boston, MA
Timezone: GMT-4
Joined: 2004-07-06
Posts: 33
Points: 0

Centering DIVs

First, apply auto margins to the banner div:
margin-left: auto;
margin-right: auto;

Then (because auto margins don't work on all browsers) create a new div to contain the banner div:
#bannerContainer {
text-align: center;
}
Then (if necessary) you can apply text-align: right; to the banner div.

That should work - let me know if you have any problems. - Jen

doxx
Offline
newbie
Last seen: 17 years 39 weeks ago
Joined: 2004-08-26
Posts: 2
Points: 0

Centering DIVs

Thanks Jen, worked like a charm! Smile