Centering a list

[cranebill]

Hi all, how do I go about centering a list on my web page? I can float it to the left and to the right, I just want it in the middle of the page or even the middle of a div

[ScottR]

margin: 0px auto;

[jeffman]

Maybe there's a trick here I don't know. I'd love to read it.The problem is that a list is a block-level item whose width is the full viewport. margin: 0 auto; doesn't work for such items. To center something that way, it has to have a defined width. But text-filled items have fuzzy widths. I think your best bet is to define the width in ems--some value that creates some wiggle room on the right side of your longest item. Because it's in ems, if the font changes, the ratio should stay the same. Now you can use margin: 0 auto;We'll call this "fuzzy centering."

[rzea]

margin:0 auto; for centering can be just margin:auto; without the 0. However, as DD said, that won't work here because you'd need to assign a width to the element.Now, I don't know the exact requirements of your design, but for the solution of your question in this post, here's a way to center a list in a DIV:HTML:

<div id="center-list">  <ul>	<li><a href="#">Link 1</a></li>	<li><a href="#">Link 2</a></li>	<li><a href="#">Link 3</a></li>	<li><a href="#">Link 4</a></li>  </ul></div>

CSS:

#center-list  { border:#ccc 1px solid; background:#fff; }#center-list  ul { padding:0; text-align:center;}#center-list  li { display:inline; }#center-list  a { padding:10px; margin:-2px; font:1em Arial, Helvetica, sans-serif; color:#fff; background:#000;}#center-list  a:hover { background:#333;}

Paste the codes in an HTML page and tweak as necessary. Play with the values as well to understand how they work together to make it look correct.I know this is overkill here, but the above CSS and HTML works in:IE6IE7Firefox 2.xFirefox 3.xSafari 3.xOpera 9.xGoogle Chrome

[jeffman]

Text-align! I forget about that sometimes because it feels like cheating when applied to divs and stuff, but since a list is usually text . . .Now, if you don't turn the <li> elements to display: inline, the list will remain vertical. Depending on your aesthetic sense, this will be pleasing or not, since the items will be true-centered. If you want the bullets to line up, this method isn't the one.Still, there's a lot to be said for a design that doesn't depend on an arbitrary width setting.

[rzea]

If you want the bullets to line up, this method isn't the one.

That's why I said above:

Now, I don't know the exact requirements of your design,...

I'm assuming he wants a horizontal navigation menu centered in the content area...I hope this is what cranebill wants, if it is, then the above code IS a method he can use.

[cranebill]

That's why I said above:I'm assuming he wants a horizontal navigation menu centered in the content area...I hope this is what cranebill wants, if it is, then the above code IS a method he can use.

Hi This is the basics of what I am trying to do with the link bar (well, what I mean is I am happy with the link bar, just not happy with the positioning http://www.weekendbridge.com/I realise it may be quite basic as sites go, but as I get more confident, I will start to do more of what I want to achieve, I have looked at a trillion templates and I dont think any of them do what I want, so I think, I will have tdo it the hard way (though it is proving a lot of fun)

[jlhaslip]

If you want to centre the list, go to http://cssplay.co.uk and have a look there.

[rzea]

cranebill, the solution to centering your nav bar is right in my post. Go ahead, try it.But THE BEST site to learn how to do AMAZING things with list is this one: How to do ANYTHING with CSS lists

[cranebill]

cranebill, the solution to centering your nav bar is right in my post. Go ahead, try it.But THE BEST site to learn how to do AMAZING things with list is this one: How to do ANYTHING with CSS lists

cheers most helpful site

[rzea]

So, did you find a solution to your problem? Let us know so the community can benefit from it as well.Thanks,

[cranebill]

So, did you find a solution to your problem? Let us know so the community can benefit from it as well.Thanks,

Hi Richard,Yes your post helped, unfortunately, it was not what I wanted LOL, I actually think, I was just trying to see if it looked right, but at least I learnt something, so I am quite pleased, back to the drawing board for me, I have so much to learn

[rzea]

As you said, lol.

Yes your post helped, unfortunately, it was not what I wanted...

Well, then next time give us:A. A link B. A codeC. An imageYou're lucky we try to help you out without any of these things to guide our answers.Glad you learned something though...

[cranebill]

As you said, lol.Well, then next time give us:A. A link B. A codeC. An imageYou're lucky we try to help you out without any of these things to guide our answers.Glad you learned something though...

yes it is much appreciated, sorry for lack of info sometimes, but, sometimes, I am not quite sure what I am trying to achieve, if that makes sense, a lot is desktop based, as the website I am using is actually in use, I run a bridge weekends (only for friends) and I need it up all the time and I have to be sure what I put on there is not a total disaster, some of my efforts, have been poor at best but I will try to give more info in future Thanks to you all again