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