div 내에서 ul을 가운데 정렬해야합니다. ie6 & ie7

Question

div에 가운데 정렬해야하는 ul이 있습니다. 내가 가지고있는 코드 (아래에서 찾을 수 있습니다)는 ie6 & ie7을 제외한 모든 브라우저에서 작동합니다. 즉, 내용이 중앙에 배치되지 않고 왼쪽으로 배치됩니다. 나는 아주 기본적인 것에 나의 부호를 벗겼다. 나는 이것을 성공적으로 해결하기 위해 수많은 수정 작업을 시도했지만, 이에 대한 어떠한 도움도 크게 감사 할 것입니다. 사전에

//CSS 
#galleryThumbs { 
    width:900px; 
    height:125px; 
    text-align:center; 
    margin:0px auto; 
} 
ul.thumb { 
    margin:0; 
    padding:0; 
    list-style:none; 
    display:inline-block; 
} 
ul.thumb li { 
    width:65px; 
    height:65px; 
    margin:0 2px 0 2px; 
    border:1px solid #ffffff; 
    display:inline-block; 
    float:left; 
} 

//HTML 
<div id="galleryThumbs"> 
    <ul class="thumb"> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li> 
    </ul> 
</div> 

많은 감사 브랜든

Answer 1

IE 6, IE 7 display:inline-block

당신은 내가 IE 만 대상으로 IE 조건부 주석에 싸여 사람들을 넣어 것 inline-block 요소

zoom: 1; 
*display: inline; 

에 해크 IE CSS로이를 대체 할 수 있습니다 지원하지 않는 . http://www.jsfiddle.net/gaby/qArVS/2

Answer 2

IE6/7은 기본적 display: block가있는 요소에 display: inline-block를 지원하지 않습니다. 또한 Quirksmode.org: CSS2 - The display declaration 참조 :

IE 6/7 만 자연 display: inline을 가진 요소에 값을 받아들입니다.

<ul>은 기본적으로 display: block이므로이 기능이 작동하지 않습니다.

해결책 중 하나는 에 고정 너비를 지정하여 부모와 중심을 맞출 수 있습니다 (margin: 0 auto).

Answer 3

위 (필자는 UL의 폭 선언과 함께 일을 의미) 솔루션에서

데모 내가에 와서 유일합니다. 그건 그렇고, 2 가지 :

1- img 태그가 xhtml 스타일이 제대로 닫히지 않았기 때문에 Doctype 선언이 단점 모드를 트리거하고 있습니다.

2- Paniyar는 CENTER의 Float에 대한 새 속성을 개발했습니다. 그것은 존재하지 않습니다. 적어도 제 책에는 없습니다.

내 두 센트

...

Answer 4

인터넷 익스플로러 7에 대한 해킹없이이 솔루션은 코드이 추가됩니다 : 당신이 해킹하지 않고도 인터넷 익스플로러 7에서 정렬되지 않은 목록을 중심으로 수있는이 함께

#yourdiv { 
      width: 100%; 
      position: relative; 
      text-align: center; 
    } 

      #yourdiv ul { 
        float: left; 
        position: relative; 
        left: 50% 
        text-align: center; 
      } 

        #yourdiv ul li { 
          float: left; 
          position: relative; 
          display: block; 
          right: 50%;     
        } 

.