Center a DIV inside a DIV?

[b-rad]

Maybe I’m going about this all wrong, so correct me at any time.

I’m trying to center a DIV inside of another DIV tag and having issues.

Here’s what I tried…

HTML

Code:

• About
• Work
• Services
• Careers
• Contact

CSS

Code:

#menu {
height: 50px ;
background: url(../_images/header_menu.gif) repeat-x ;
}
#menu-items {
width: 880px ;
margin: 0 auto ;
}
ul#top-nav {
}
ul#top-nav li {
display: inline ;
}
ul#top-nav li a {
display: block ;
height: 50px ;
text-indent: -9999px ;
float:left ;
}
ul#top-nav li.about a {
width: 188px ;
background: url(../_images/menu_about.gif) bottom center no-repeat ;
}
ul#top-nav li.work a {
width: 167px ;
background: url(../_images/menu_work.gif) bottom center no-repeat ;
}
ul#top-nav li.services a {
width: 168px ;
background: url(../_images/menu_services.gif) bottom center no-repeat ;
}
ul#top-nav li.careers a {
width: 168px ;
background: url(../_images/menu_careers.gif) bottom center no-repeat ;
}
ul#top-nav li.contact a {
width: 189px ;
background: url(../_images/menu_contact.gif) bottom center no-repeat ;
}
ul#top-nav li a:hover {
background-position: center center ;
}

So, right now my menu buttons are left-aligned but I’d like them to be centered on the page.

Here is the site I’m working on http://www.viziworx.com/test.html

Any and all feedback pertaining to achieving my goal will be much appreciated.

Thanks in advance!

B-Rad
Hampton Roads Most Wanted

[b-rad]

Doh!

Easy enough. It’s always the simplest mistake that gets me every time!

Haha.

I think I need a break from staring at the monitor.

Thanks Chris!

[Author]

Posts