Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== CSS - Position - Horizontally center a row of floated elements ======

Wrap the container in an element with:

<code css>
float: right;
position: relative;
left: -50%;
</code>

On the main container, add the following:

<code css>
position: relative;
left: 50%;
</code>

----

===== Example =====

<code css>
#menu {
  float: right;
  position: relative;
  left: -50%;
}
#menu ul {
  position: relative;
  left: 50%;
}
#menu li {
  float: left;
}
</code>

<code html>
<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>
</code>

----

<WRAP info>
**NOTE:**  On responsive design, consider adding **overflow:hidden** to the #menu container.
</WRAP>