플로팅 Divs 또는 목록을 오버 플로우가있는 유체 레이아웃에 맞추기

Question

유체 레이아웃의 가운데에 배치하고자하는 플로팅리스트 항목을 가진 축소판 갤러리를 만듭니다. 나는 하나의 라인 일 때 어떤 문제도없이이 작업을 수행 할 수 있지만 오버플로가되면 더 이상 중앙에 놓이지 않습니다. 이것은 CSS로만 불가능합니까? 다음은 예입니다 :

<style> 
#centeredmenu { 
    float:left; 
    width:100%; 
    position:relative; 
} 
#centeredmenu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
#centeredmenu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
    width: 200px; 
    background-color:black; 
    border:1px solid white; 
} 
</style> 
<div id="centeredmenu"> 
    <ul> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
     <li>/</li> 
    </ul> 
</div> 

이 사람이 JS 함께 할 수있는 방법에 대한 방향으로 날 지점 수 있습니다 CSS로 순수하게 수행 할 수없는 경우?

Answer 1

인라인 블록으로 변경, 블록에서 리튬을이 CSS를 시도

#centeredmenu { 

} 
#centeredmenu ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
#centeredmenu ul li { 
    display:inline-block; 
    margin:0; 
    padding:0; 
    width: 200px; 
    background-color:black; 
    border:1px solid white; 
} 

Answer 2

RRcom 나머지 Y의 대답은 좋지만, 당신이 필요로하는 경우이 다음 표시 IE7 작업 : 인라인 블록 작동 안 할 것이다.

당신이 해킹 ("인라인 블록"후 추가 라인 참조) IE7과 현대적인 브라우저 같은 효과를 얻을 수 있습니다

:

#centeredmenu ul li { 
    display:inline-block; 
    *display: inline; 
    *zoom: 1; 
    margin:0; 
    padding:0; 
    width: 200px; 
    background-color:black; 
    border:1px solid white; 
} 

이 해킹에서만 (IE7에 의해 해석 될 것이다 "* "해킹),이 경우에만 디스플레이가 적용됩니다 (인라인 및 줌 : 1 규칙). 이렇게하면 인라인 요소가 "레이아웃"을 갖게됩니다. Thats는 너비 또는 높이 속성 (예 :)을 정렬 할 수 있지만 같은 줄에있는 인라인 요소입니다.

Here is the full doc explaining this hack