Centering navigation that uses background images for links

HTML & CSS
1

I am trying to center a navigation list to the rest of the page that uses background images for the links. I have tried the

display:table;

method, but that seems to mean that I need to change my list items that are being displayed using

float:left

to

display:inline

, which makes the background images break. Is there a way to do this?

Here is the website. It is the main navigation bar under the logo that is of concern.

2

Hi,

Use inline-block instead of floats and then you can center them with text-align:center on the parent.


#nav{float:none}
#nav ul{text-align:center}
#nav li{
display:inline-block;
float:none;
}
* html #nav ul li{display:inline}/* ie6 fix */
*+html #nav ul li{display:inline}/* ie7 fix */

The IE6/7 fixes must follow after the original rule or they won’t work properly.

3

Thanks, Paul! That did the trick! I appreciate your help, once again!

4