CSS Tip for How-to Perfectly Center Top-Navigation or Footer Bar/List inside the Page

October 22nd, 2011 by Regaz

This Question is very Interesting because is Widely Diffused the Habit to Float the List Containing the Navigation. The problem is that Right this Floating property Rend after extremely problematic the Tentative to Center Exactly the Navigation Bar inside the Page.
There is a Very Elegant and Simple Solution of this Problem and it consist to Avoiding Floated Lists Items and Instead use the CSS Property:

display:inline

With this kind of simple alignment after is Easy to Centering the whole List with a:

text-align: center

Here I give also the Complete Example.
If this is the List:





This Tip to be Working First you Need to have Setup the Body or #container Width:

#container {
width: 950px;
}

This is the Simple CSS Associated that give a Perfectly Centered Navigation Bar:

ul#menu {
text-align:center;
}
ul#menu li {
display: inline;
}
(Visited 1 times, 1 visits today)

Tags: , , ,