Ajax Loader
×

Centering Horizontal Menu/Navigation or Tabs/Lists with CSS

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/app/modules/labs/views/_details.php on line 68
×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Centering Horizontal Menu/Navigation or Tabs/Lists with CSS

    CSSDeck G+