트위터 부트 스트랩에서 탐색 드롭 다운을 중앙에 배치하는 방법은 무엇입니까?

Question

트위터 부트 스트랩을 사용하여 테마를 만들고 있는데, 왼쪽 정렬 대신 가운데로 정렬되도록 탐색 드롭 다운을 얻으려고합니다. 명확히 말하면 : 상자 안의 텍스트를 가운데 맞추는 것이 아니라 전체 드롭 다운 상자를 부모를 기준으로 중심에 두는 것을 말합니다.

마크 업은 다음과 같습니다

<ul id="nav" class="nav ww-nav pull-right hidden-phone"> 
    <li class="active"><a href="#">Words</a></li> 
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <li><a href="#">Published</a></li> 
     <li><a href="#">Categorized</a></li> 
     <li><a href="#">Uncategorized</a></li> 
     <li><a href="#">Award Winning</a></li> 
    </ul>     
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

나는 스크린 샷을 첨부 할 것, 무슨 뜻인지 명확히하기 위해 :

참고 : 나는 일반적인 찾고 있어요 솔루션, 다른 상위 항목과 함께 작동합니다. 테마이기 때문에 네비게이션 항목은 3 자에서 20 자 사이의 값을 가질 수 있습니다. X 픽셀만큼 간단한 여백을 설정해도 불행히도 잘라내 지 못합니다.

PS : 코멘트에 요청, 나는 JSFiddle에 모든 것을 넣어 : http://jsfiddle.net/zdCYX/4/

감사

Answer 1

모든 하위 메뉴의 왼쪽 여백을 계산하고 조정하여 jQuery를 사용하여이를 해결했습니다.

이렇게하면 내 탐색 항목의 간격이 동일 해집니다.

document.onreadystatechange = function() { 
    if (document.readyState === 'complete') { 
     $("ul.ww-nav ul.dropdown-menu").each(function(){ 
      var parentWidth = $(this).parent().innerWidth(); 
      var menuWidth = $(this).innerWidth(); 
      var margin = (parentWidth/2) - (menuWidth/2); 
      margin = margin + "px"; 
      $(this).css("margin-left", margin); 
     }); 
    } 
} 

Answer 2

Jsfiddle을 Demo in browser
당신은 주요 탐색 요소와보다 폭을 설정 할 수있는 일 다음과 같은 : 드롭 다운에

.navbar .nav > li { 

    width: 116px; 
    } 

.dropdown-menu { 
     display:none; 
     width:116px; 
     min-width:116px; 
     margin:0 auto; 
    } 

는 다음과 같은 코드 정렬 요소를 변경해야합니다

.dropdown-menu > li > a { 
     text-align:center; 
}