Help with CSS: How to align lower header to center

[shadowpage]

Hello, I am rather new to CSS and have been working on customizing the store design of a bigcommerce template I am using.

http://www.animekawaiicastle.com

Currently I’m having trouble getting my lower header to be aligned to the center of the page (i.e my horizontal category and pages menus). I know the correct area of my css to edit, but finding the correct code to use has proved a sad challenge for novice self. I assumed that to accomplish what I’m trying to do all I would need to add would be something like:
“text-align: center;”
but this has not worked, neither have any other ‘float’ values that I’ve tried.

If anyone out there is willing to spare information I’d greatly appreciate it! Thanks ^-^

[Paulie_D]

Do I understand that you want the menus to be centered on the page?

At the moment, you would have to either give them a set width and then set `margin: xx auto` or do some juggling with padding on either side.

That probably isn’t going to help with your top-line menu as those two lines are actually one BIG list.

If you have the ability to change the template, I would look into converting the menu to inline-block as it’s much easier to center the list items.

joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

[Senff]

If you remove float:left and add display:inline-block to #SideCategoryList li, #SideCategoryList .sf-menu li (line 367) then it might already do what you want. (@Paulie, not sure why that would require the ability to change the template?)

[Paulie_D]

I don’t know much (read anything) about templates. I assumed this might be a theme thingy. :-)

[shadowpage]

Thank you both so much! Both your comments were very useful to me. @Senff, using ‘display:inline-block’ worked perfectly. I have one last question however, if you feel like helping out some more…
While the category menu is now centered, my pages menu below the category menu is still aligned to the left (i.e ‘blog, newsletter, contact us’ links). I haven’t been able to find the line in css that affects this menu so I may align it to the center as well. Any possible suggestions?

Thank you again very much!

[Author]

Posts