Centering Horizontal Menu/Navigation or Tabs/Lists with CSS

Rishabh

• 30999
• 0

Sometimes we want to center the list items of our navigations, menus, tabs or plain [un]ordered lists. Most of us probably don't realize but the solution is quite simple.

In this codecast, you'll see 2 ways to solve the problem:

• Making the ul behave like a table with display: table and giving it a left/right margin of auto. This really helps when your list items are floated.

• Set the list items to display: inline-block and then center align the contents of the ul with text-align: center.

  This way, the list items can be centered and also be given margin and width/height properly with CSS.

Problem Solved!

Related:

Warning: Invalid argument supplied for foreach() in /var/www/cssdeck.com/app/modules/labs/views/_details.php on line 68