css:horizontally_center_a_row_of_floated_elements
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revision | |||
| css:horizontally_center_a_row_of_floated_elements [2020/07/15 09:30] – external edit 127.0.0.1 | 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%; | ||
| - | </ | ||
| - | |||
| - | On the main container, add the following: | ||
| - | |||
| - | <code css> | ||
| - | position: relative; | ||
| - | left: 50%; | ||
| - | </ | ||
| - | |||
| - | 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 html> | ||
| - | <div id=" | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ---- | ||
| - | |||
| - | <WRAP info> | ||
| - | **NOTE: | ||
| - | </ | ||
css/horizontally_center_a_row_of_floated_elements.1594805433.txt.gz · Last modified: 2020/07/15 09:30 by 127.0.0.1