Re: using css for centering

At 11:26 03/06/02 -0400, Nate Harel wrote:
<snip/>
>I want to produce a page that is entirely centered on the page. Using 
>tables, this is easy. I simply make a table with a particular width and 
>center it. Then no matter the size of the screen, the contents are centered.
>
>How do I do the same with CSS?

With grave difficulty.

Centering block level elements should be easy with CSS, but browser 
implementations are sometimes iffy. What you want to do is set the left and 
right margins to the same size, which can be done in various ways.

If you want, say, a paragraph to be 50% of the width or the page and 
horizontally centered you could use this CSS:

p {
         margin-left: 25%;
         margin-right: 25%;
}

If you wanted to give the block level element a width in pixels then things 
get messy. You should be able to do this:

p {
         margin-left: auto;
         margin-right: auto;
         width: 500px;
}

In theory, the browser would set the width of the element to 500px, and 
then divide up the remaining space equally between the left and right 
margins. In practice this is not well supported, with the left margin being 
set to 0 in many browsers. Fortunately though newer browsers do support this.

One thing you shouldn't do is use text-align: center. This aligns the 
inline elements with the center of their inline boxes. This is a tricky 
thing to describe, but have a look at http://aamcf.co.uk/temp/text-align to 
see what I mean (look at the source code too).

Andrew

--
http://aamcf.co.uk/

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA