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.