# Centering Lists
One of the most common techniques for creating a menu or some sort of a navigational bar is by using a [`list`](http://www.w3.org/TR/html401/struct/lists.html). A `list` is well-structured, uses fewer elements to parse than a table (buzzword _tableless_) and can always fall back to normal HTML when CSS or JavaScript is used to manipulate it for effects. (i.e, degrade gracefully)
This is probably the easiest way to center.
Centering Lists
But this has some drawbacks.
* ### text-align
is meant for aligning text, not block elements, but this works for centering _inline_ blocks on all browsers. But now, all text nodes within all child blocks inherits this text-align alignment property.
* ### height
Because the list and list items are inline, there is no room for adusting or specifying the height of the menu items. height, padding-top, padding-bottom won’t have any effect.
A workaround for _inline_ is by treating the list as a table and the list items as `table-cells`. But Internet Explorer supports `display:table` and `display:table-cell` only from version 8 onwards. So this is a no no solution for IE 6 & IE 7. See [the display declaration](http://www.quirksmode.org/css/display.html)
Centering Lists
A better option would be float the elements and specify exact widths. This works nicely when you know the exact content and can specify the width of each element.
Centering Lists
For a fully floating list with centering, applying `display:inline-block` to the list is enough to achieve the desired result. But according to Quirksmode, `inline-block` is incomplete in IE6 and IE7. I don’t know how incomplete works, but it wierdly seems to work in IE6 when added in [IE conditional statements](http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx).
Full HTML :
Centering Lists