센터링 인라인리스트

나는 아이템 목록을 센터에 올리려고 노력하고있다. 몇 가지 유사한 질문을 살펴 보았지만 올바른 조정 방법을 찾을 수없는 것 같습니다. 센터링 인라인리스트

나는 용기의 수/하위 컨테이너를 가지고,하지만 난 메뉴 탐색에 주로 관심이 있어요 :

<style type="text/css"> 
    .content { 
     position: relative; 
     border-top-width: 1px; 
     width: 100%; 
     min-width: 960px; 
     margin-top: -1px; 
    } 

    .content-container { 
     border: 0; 
     position: relative; 
     width: 960px; 
     border-radius: 0 0 0 0; 
     margin: 0px auto; 
    } 

    .full-content-container { 
     vertical-align: top; 
     display: inline-block; 
     min-height: 900px; 
     width: 958px; 
     height: 100%; 
     position: relative; 
     padding: 15px 0 0 0; 
    } 

    .browse-container { 
     padding: 16px 0 0 0; 
     font-size: 12px; 
     width: 958px; 
     text-align: center; 
    } 

    #menu-nav { 
     margin:0; 
     padding:0; 
     list-style:none; 
     float: left; 
    } 

    #menu-nav li { 
     float: left; 
     display:block; 
     background-color: #6F7D94; 
     position:relative; 
     z-index:500; 
     margin:0 1px; 
    } 

    #menu-nav li a { 
     display:block; 
     padding:5px 10px 5px 10px; 
     font-weight:200; 
     text-decoration:none; 
     text-align:center; 
     color:#fff; 
    } 

    #menu-nav li a:hover { 
     background:#ccc; 
     color:#000; 
     text-decoration:underline; 
    } 

</style>

가 어떻게 수평 다음과 같은 메뉴를 중심으로 할 수 있습니까?

<body> 

<div class="content"> 
    <div class="content-container"> 
     <div class="full-content-container"> 
      <div class="browse-container"> 
       <ul id="menu-nav"> 
        <li><a href="#">Menu 1</a></li> 
        <li><a href="#">Menu 2</a></li> 
        <li><a href="#">Menu 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

</body>

출처

2011-08-10 Ed.

찾고 계신가요? http://jsfiddle.net/4AFkW/5/? 당신이 당신의 메뉴 탐색 요소의 궁극적 폭이 될 것입니다 무엇을 알고있는 경우

출처

2011-08-10 15:00:25 gregseth

, 당신은이 방법으로 수행 할 수 있습니다

#menu-nav { 
    margin:0; 
    padding:0; 
    list-style:none; 
    /*float: left;*/ 
    position:relative; 
    left: 50%; 
    margin-left: -90px; /* half of the width */ 
    width: 180px; 
}

출처

2011-08-10 15:00:36

이 작동을하지만, 나는 그것이 동적되고 싶어요. 메뉴의 크기가 변경 될 수 있습니다. –

센터링 인라인리스트

답변

관련 문제