Ajax Loader
×

Centered Tabs (List)

This is a centered list, which solves a common problem among us frontend coders. Sometimes we want to center the list items of an unordered list. Most of us probably don't realize but the solution is quite simple. The answer to the problem is to 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.

Also, setting the anchor links as inline-block will enable us to set line-height on them. Problem Solved!

Note: Internet Explorer 6 and 7 might need display: inline; instead of inline-block for ul li {. This is because inline-block is only supported in IE6 and IE7 on elements with a display of inline by default.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Centered Tabs (List)

    CSSDeck G+