Центр плавающих divs внутри абсолютного положения div

Question

У меня есть этот набор html и css. Я хочу, чтобы маленькие блоки гаджета плавали влево, а центрировались внутри абсолютной позиционированной гаджет-обертки.

Итак, обертка гаджета полностью расположена в нижней части страницы. Он содержит x количество гаджетов, которые плавают слева внутри обертки.

Все эти гаджеты должны быть центрированы внутри обертки - это возможно и как ...? Это действительно убивает меня ....

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

Вы пробовали изготовления gadget элементы инлайн и приведения их в центр с Шрифтом- выравнивать?

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

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

Это может работать, я просто не знаю, как элементы уровня блока внутри будет вести себя (я не могу проверить это прямо сейчас). Вы также можете попробовать inline-block вместо inline.

Answer 2

display: inline-block; работает с первым ответом. убедитесь, что вы удалили float: left;