절대 위치 div의 가운데 부동 divs

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 대신 inline-block을 사용해 볼 수도 있습니다.

Answer 2

display: inline-block;은 첫 번째 대답과 함께 작동합니다. 삭제했는지 확인하십시오. float: left;