This is an old revision of the document!

CSS - Horizontally center a row of floated elements

Wrap the container in an element with:

float: right;
position: relative;
left: -50%;

On the main container, add the following:

position: relative;
left: 50%;

That’s really all there is too it.

Example

#menu {
  float: right;
  position: relative;
  left: -50%;
}
#menu ul {
  position: relative;
  left: 50%;
}
#menu li {
  float: left;
}

<div id="menu">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">This is long...</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">http://www.upshots.org/</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</div>

NOTE: On responsive design, consider adding overflow:hidden to the #menu container.