|
|
Posted by Ben C on 10/24/06 11:08
On 2006-10-24, John <john1949@yahoo.com> wrote:
> Hi
>
> I have a dropdown menu. Standard HTML with ul and li.
>
> The following code works except that the boxes are all left justified and I
> would like them to be centred.
> I've tried auto with margins and various permutations but cannot get the
> boxes to center.
> Any ideas.
>
> div#navbar {width:100%; margin-left:auto; margin-right:auto;}
100% means "100% of the container". So no room left for margins, so they
will be computed as zero.
width: auto on a normal block box results in something quite similar.
Is this the div you want centered?
Then the question is how wide do you want it. If you want it just wide
enough for the things in it, then you're another person who wants to
centre something that's shrink-to-fit.
And if you want that, since display: inline-block is not widely
supported, you will have to use a table.
Try
div#navbar ul
{
list-style: none;
display: table;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin: 0px;
}
This should work because display: table is shrink-to-fit. So the browser
will make the ul wide enough for its content but no wider. Then its
auto left and right margins will take up any remaining space to the
edges of its containing block under the condition that they get equal
values which gets you centering.
Instead of display: table you can alternatively set a width, but that's
annoying, because you have to know how wide you want the ul to be. In
your case you probably do as the <li>s look they have a set width, but
all the same it's inconvenient.
> div#navbar ul {list-style:none; padding:0; margin:0;}
[...]
> Excuse the sloppy coding.
I won't mention that you should put units like "px" after the 0s then.
Navigation:
[Reply to this message]
|