[css-d] Trick for centering menu
Trying to center bottom navigation menu in footer of webpage. Menu ignores centering and wants to left justify rather than center in a width defined area. Any tricks to force the centering? It was suggested that I manually center it by increasing the padding but I thought there had to be a better way around this. Any ideas? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trick for centering menu
> Trying to center bottom navigation menu in footer of webpage. There are lots of centering methods, most of which depend on the particular page structure. A link would be really helpful. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trick for centering menu
> Unfortunately, I am having to work off my local drive with no access to > upload anything at this point. New job, working with little resources at this > point while waiting for server access and more software. Hoping things will > be worked out next week. Bummer. Well, shots in the dark I guess then. If your menu has a container, if you give it left and right margins of "auto", that should center it. Or you could give the container text-align:center, and the menu items display:inline-block (but only if IE doesn't matter. Otherwise, you'll need a hasLayout hack. Google will turn that up for you) Hopefully those can help you out. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trick for centering menu
If your menu is made up of a list that is arranged horizontal using (display:inline), setting (text-align: center) for the footer container should work. Otherwise, using (margin:0 auto) with the menu container is also an option. Although, you may have to give the menu a width value for that to work. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trick for centering menu
At 2/18/2010 10:23 AM, Neil Hunt wrote: >Trying to center bottom navigation menu in footer of webpage. Menu ignores >centering and wants to left justify rather than center in a width defined >area. Any tricks to force the centering? It was suggested that I manually >center it by increasing the padding but I thought there had to be a better >way around this. Any ideas? There is a useful wiki that accompanies this listserve. Check this out: http://css-discuss.incutio.com/?page=CenteringBlockElement Briefly, if you know the width of your menu you can declare that in your stylesheet and then use a number of techniques for centering, including setting margins left & right to 'auto' or using the left: 50%; margin-left: -NNNpx where NNN is half your meun width. If you can't predict the width, you can try declaring the menu items inline and use text-align: center. If you can't use inline, say because it doesn't give you enough control over margins & padding, you can try table-cell and sacrifice cross-browser support. (It's easy to serve separate stylesheets to various versions of IE using conditional comments.) Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
