IE의 CSS 메뉴에있는 가운데 LI 요소?

Question

알 수없는 너비의 CSS 메뉴를 센터해야합니다. 해결책을 찾았습니다. UL 태그를 display : table 또는 display : inline-table으로 설정하면 LI 요소를 가운데에 정렬 할 수 있습니다.

이 솔루션은 IE에서 작동하지 않았습니다. HTML/CSS 만있는 IE에서 작동하는 또 다른 솔루션이 있습니까?

내 코드를 잘보고 싶다면을 붙여 넣었습니다.

Answer 1

How about this? 나를 위해 IE6, IE7, Firefox에서 작동합니다.

마크 업 :

<div id='menu-centered'> 
    <ul> 
     <li><a href="">My first item</a></li> 
     <li><a href="">My second item</a></li> 
     <li><a href="">My third item</a></li> 
     <li><a href="">My fourth item</a></li> 
     <li><a href="">My fifth item</a></li> 
    </ul> 
</div> 

CSS :

#menu-centered { 
    background-color: #0075B8; 
    padding: 10px; 
    margin: 0; 
} 

#menu-centered ul { 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

#menu-centered li { 
    display: inline; 
    list-style: none; 
    padding: 10px 5px 10px 5px; 
} 

#menu-centered a { 
    font: normal 12px Arial; 
    color: #fff; 
    text-decoration: none; 
    padding: 5px; 
    background: #57a8d6; 
} 

#menu-centered a:hover { 
    background: #5fb8eb; 
} 

모든 일의 핵심은 기본적으로 <ul> 요소에 text-align: center;을하고 있었다. display: table;과 같은 것을하고 싶지는 않습니다. 단지 hackish 일 뿐이며 모든 브라우저에서 작동하지 않는다는 것을 알았습니다. 이 방법은 플로팅을 피하기 때문에 거기에 명확한 요소가있을 필요는 없습니다. <ul>에 overflow: auto;을 추가하여 제거 할 수는 있습니다. 희망이 도움이됩니다.