Centering a horizontal un-ordered list

This is a great example of how to center a horizontally displayed list without using tables. It’s a great way to do footer menu’s.
In this example, the UL is contained in a div container with the class “footerMenu”

.footerMenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
.footerMenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.footerMenu li {
border-left:#FFF 1px solid;
float:left;
list-style:none;
position:relative;
right:50%;
padding: 0 10px;
}
.footerMenu li a {
color:#fff;
text-decoration:none;
}
.footerMenu li a:hover, .footerMenu li a:active, .footerMenu li a:focus {
color: #fff;
text-decoration:underline;
}
.footerMenu ul :first-child {
border-left: 0;
padding-left: 0;
}

Advertisement