센터의 드롭 다운 메뉴 자체

Question

내부 이것은 내가 "홈", "카테고리", "일", ECC ECC 내부의 버튼을 중심하려는 (페이지의 끝 부분에 JsFiddle 링크) 내 시나리오

입니다 같은 바.

즉, 이제 왼쪽에 있습니다. 나는 중심에두고 싶다.

<nav id="menu-wrap">  
    <ul id="menu"> 
     <li><a href="/">Home</a></li> 

     <li> 
      <a href="">Categories</a> 
      <ul> 
       <li> 
        <a href="">CSS</a> 
        <ul> 
         <li><a href="">Item 11</a></li> 

         <li><a href="">Item 12</a></li> 
         <li><a href="">Item 13</a></li> 
         <li><a href="">Item 14</a></li> 
        </ul>    
       </li> 
       <li> 
        <a href="">Graphic design</a> 

        <ul> 
         <li><a href="">Item 21</a></li> 
         <li><a href="">Item 22</a></li> 
         <li><a href="">Item 23</a></li> 
         <li><a href="">Item 24</a></li> 
        </ul>    
       </li> 

       <li> 
        <a href="">Development tools</a> 
        <ul> 
         <li><a href="">Item 31</a></li> 
         <li><a href="">Item 32</a></li> 
         <li><a href="">Item 33</a></li> 
         <li><a href="">Item 34</a></li> 

        </ul>    
       </li> 
       <li> 
        <a href="">Web design</a>    
        <ul> 
         <li><a href="">Item 41</a></li> 
         <li><a href="">Item 42</a></li> 
         <li><a href="">Item 43</a></li> 

         <li><a href="">Item 44</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="">Work</a> 
      <ul> 

       <li> 
        <a href="">Work 1</a> 
        <ul> 
         <li> 
          <a href="">Work 11</a>  
          <ul> 
           <li><a href="">Work 111</a></li> 
           <li><a href="">Work 112</a></li> 

           <li><a href="">Work 113</a></li> 
          </ul>       
         </li> 
         <li> 
          <a href="">Work 12</a> 
          <ul> 
           <li><a href="">Work 121</a></li> 
           <li><a href="">Work 122</a></li> 

           <li><a href="">Work 123</a></li> 
          </ul>       
         </li> 
         <li> 
          <a href="">Work 13</a> 
          <ul> 
           <li><a href="">Work 131</a></li> 
           <li><a href="">Work 132</a></li> 

           <li><a href="">Work 133</a></li> 
          </ul>       
         </li> 
        </ul>     
       </li> 
       <li> 
        <a href="">Work 2</a> 
        <ul> 
         <li> 

          <a href="">Work 21</a> 
          <ul> 
           <li><a href="">Work 211</a></li> 
           <li><a href="">Work 212</a></li> 
           <li><a href="">Work 213</a></li> 
          </ul>       
         </li> 

         <li> 
          <a href="">Work 22</a> 
          <ul> 
           <li><a href="">Work 221</a></li> 
           <li><a href="">Work 222</a></li> 
           <li><a href="">Work 223</a></li> 
          </ul>       
         </li> 

         <li> 
          <a href="">Work 23</a> 
          <ul> 
           <li><a href="">Work 231</a></li> 
           <li><a href="">Work 232</a></li> 
           <li><a href="">Work 233</a></li> 
          </ul>       
         </li> 

        </ul>     
       </li> 
       <li> 
        <a href="">Work 3</a> 
        <ul> 
         <li> 
          <a href="">Work 31</a> 
          <ul> 

           <li><a href="">Work 311</a></li> 
           <li><a href="">Work 312</a></li> 
           <li><a href="">Work 313</a></li> 
          </ul>       
         </li> 
         <li> 
          <a href="">Work 32</a> 

          <ul> 
           <li><a href="">Work 321</a></li> 
           <li><a href="">Work 322</a></li> 
           <li><a href="">Work 323</a></li> 
          </ul>       
         </li> 
         <li> 
          <a href="">Work 33</a> 

          <ul> 
           <li><a href="">Work 331</a></li> 
           <li><a href="">Work 332</a></li> 
           <li><a href="">Work 333</a></li> 
          </ul>       
         </li> 
        </ul>     
       </li> 

      </ul>  
     </li> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact</a></li> 
    </ul> 
</nav> 

http://jsfiddle.net/uHuHE/

Answer 1

그냥 text-align: center;

Demo

---

#menu ul a에 사이드 참고를 할당 : 당신이 중첩 수준의 텍스트 정렬에 특정 동안, 당신은 항상 사용할 수 있도록하려면 > 선택기 예를 들어 첫 번째 드롭 다운 파일의 텍스트를 정렬하려는 경우 VEL, 당신은 단순히 #menu {} 선언의 자리에 #menu-wrap를 사용하는 것보다, 메인 메뉴 항목을 중앙에 당신이 주석으로, 당신이 원하는

등등

ul#menu > li { 
    /* Targets main menu items */ 
} 

ul#menu > li > ul > li > a { 
    /* Targets 1st level dropdown */ 
} 

...

---

사용할 수있는 것보다, 당신의 #menu 일부 고정 폭을 할당하고 내가 더 JSF 볼 margin: auto;

Demo 2