Center of floating divs inside an absolute positioned div

Question

I have this set of html and css. I want the small blocks of the gadget to float on the left, and center themselves inside an absolute positioned gadget wrapper.

Thus, the gadget wrapper is completely located at the bottom of the page. It contains x the number of gadgets that float on the left inside the wrapper.

All these gadgets should be concentrated inside the wrapper - is this possible and how ...? It really kills me ....

HTML

<div id="gadget-wrapper">
    <div class="gadget">
        <h2>1</h2>
        <div class="value-holder critical">not set</div>
        <div class="value-holder non-critical">not set</div>
    </div>
    <div class="gadget">
        <h2>2</h2>
        <div class="value-holder critical">not set</div>
        <div class="value-holder non-critical">not set</div>
    </div>
    <div class="gadget">
        <h2>3</h2>
        <div class="value-holder critical">not set</div>
        <div class="value-holder non-critical">not set</div>
    </div>
</div>

CSS

#gadget-wrapper {
    width: 900px;
    font-family: "Century Gothic";
    color: #FFF;
    position: absolute;
    bottom: 10px;
    outline: 1px solid green;
}

.gadget h2 {
    margin: 0px;
    font-weight: normal;
    font-size: 16px;
}

.gadget {
    min-width: 120px;
    margin-right: 10px;
    padding: 5px;
    -webkit-border-radius: 10px;
    background-color: #383838;
    opacity: 0.75;
    float: left;
    border: 4px solid #000;
}

.value-holder.critical.active {
    color: #FF0000;
}

.value-holder.non-critical.active {
    color: #FFFF00;
}

.value-holder {
    font-size: 28px;
    float: left;
    width: 50%;
    text-align: center;
}

Answer 1

Have you tried to make elements gadgetinline and center them with alignment of the text?

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

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

, , ( ). inline-block inline.

Answer 2

display: inline-block; . , float: left;