User Tools

Site Tools


css:position:horizontally_center_a_row_of_floated_elements

CSS - Position - 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%;

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.

css/position/horizontally_center_a_row_of_floated_elements.txt · Last modified: 2021/08/08 12:44 by peter

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki