html - How to Center Floated Divs in a Container -

is possible center floated divs in container , if how?

for example have page container div containing lots of variable sized (dynamically generated) floated (left) divs. divs overflow onto next line reguarly never centered in container div, instead alined left. looks this:

---------------------------- -                          - - +++  +++++  ++++  ++     - - +++  +++++  ++++  ++     - -                          - - ++   ++++++  +++  +      - - ++   ++++++  +++  +      - -                          - ---------------------------- 

whereas floated divs centered in container this:

---------------------------- -                          - -   +++  +++++  ++++  ++   - -   +++  +++++  ++++  ++   - -                          - -   ++   ++++++  +++  +    - -   ++   ++++++  +++  +    - -                          - ---------------------------- 

thanks,

dliks

it possible. using http://www.pmob.co.uk/pob/centred-float.htm , http://css-discuss.incutio.com/wiki/centering_block_element source.

here fiddle demonstrating concept, using html , css below: https://jsfiddle.net/t9qw8m5x/

<div id="outer">     <ul id="inner">         <li><a href="#">button 1</a></li>         <li><a href="#">button 2 long text</a></li>         <li><a href="#">button 3</a></li>     </ul> </div> 

this minimum css needed effect:

#outer {     float: right;     position: relative;     left: -50%; }  #inner {     position: relative;     left: 50%;  }  #inner > li {     float: left; } 

explanation:

start off li { float: left; } rule. wrap floats in left: 50%; relative position, left edge of <ul>'s box in horizontal centre of page, use rules in #outer correctly adjust centre of #inner aligned page.