Center floating divs inside of absolute positioned div

Question

I have this set of html and css. What I want is to have to have the small gadgets blocks float left but to centered inside of the absolute positioned gadget-wrapper. So, the gadget wrapper is absolute positioned to the bottom of a page. It holds x number of gadgets that floats left inside of the wrapper. All these gadget should be centered inside the wrapper - is this possible and how ...? This is really killing me .... HTML ```

1

not set

2

not set

3

not set

``` CSS ``` #gadget-wrapper { width: 900px; font-family: "Century Gothic"; color: #FFF; position: absolute; bo…

Accepted Answer

Have you tried making the `gadget` elements inline and aligning them to the center with text-align?

```
#gadget-wrapper {
    ...
    text-align: center;
}

.gadget {
    display: inline;
    float: none;
}
```

This might work, I'm just not sure how the block level elements inside will behave (I'm unable to test this right now). You can also try `inline-block` instead of `inline`.

Center floating divs inside of absolute positioned div

Solution

Problem