Centering several things horizontally in a div

[Jobarr]

I am making a 1-line menu with several items on it. With tables I would make one row, put each item into a cell, make the table the width I want, and set each cell to center horizontally.

But, I am trying to do this with CSS. What would be the best way to get this effect? I have 5 items, so I thought to set each one to width: 20%, but that did nothing. I tried to set the padding on the left and right sides to 10%, but that didn't work as that didn't take into account the extra width of the words. Currently I have the left and right padding set to 5% and it seems to almost work. But it is not perfect!

So, I am stumped. Is there any good way to do this? You can see what I am doing here:

[snip]

Thanks!

[edited by: heini at 7:37 am (utc) on June 20, 2003]
[edit reason] see your sticky mail [/edit]

[trismegisto]

Hi Jobarr, welcome to WebmasterWorld!

First of all, you should edit your post and remove your URL, it’s against the TOS [webmasterworld.com].

For your horizontal navigation, your solutions didn’t work because the <anchor>s you are using are inline elements, so you can not assign a width. You could use a display: block; and then assign a width in your <anchor>s, then float them to accomplish the desire effect.

Hope it helps.

[Jobarr]

Yes, I realize inline elements cannot have widths now but is the a way around that?

[edited by: heini at 7:37 am (utc) on June 20, 2003]