Differences

This shows you the differences between two versions of the page.

--- css:horizontally_center_a_row_of_floated_elements [2020/05/20 09:53] – created peter
+++ css:horizontally_center_a_row_of_floated_elements [2021/08/08 12:43] (current) – removed peter
@@ Line 1: / Line 1: @@
-====== CSS - 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>
-That’s really all there is too it.
-----
-===== 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>