이러한 탐색 항목을 가운데에 배치하는 방법은 무엇입니까?

Question

이 내용은 jsfiddle이며 nav 항목이 왼쪽에 정렬되어 있음을 볼 수 있습니다. 에 ... 어떤 아이디어 여기

사용자 로그

<div id="cssmenu"> 
<ul> 
    <li><a href="#"><span>Home</span></a></li> 
    <li class="has-sub "><a href="#"><span>Products</span></a> 
    <ul> 
     <li class="has-sub "><a href="#"><span>Product 1</span></a> 
      <ul> 
       <li><a href="#"><span>Sub Product</span></a></li> 
       <li><a href="#"><span>Sub Product</span></a></li> 
      </ul> 
     </li> 
     <li class="has-sub "><a href="#"><span>Product 2</span></a> 
      <ul> 
       <li><a href="#"><span>Sub Product</span></a></li> 
       <li><a href="#"><span>Sub Product</span></a></li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#"><span>About</span></a></li> 
    <li><a href="#"><span>Contact</span></a></li> 
</ul> 
</div>​ 

Answer 1

당신이 당신을 확인하려면 및 li는 display:block (아마도 당신은 같은 폭을 그들에게주고 싶어), 당신은 단지 다음과 같은 속성을 추가, relative 위치와 함께 올바른 생각을 가지고 있습니다 li을 단지 display:inline으로 만들고 다른 모든 것들을 제거하고 단순히 다음과 같이하십시오.

#cssmenu { text-align: center; } 
#cssmenu ul { list-style: none; } 
#cssmenu ul li { display: inline; } 

Answer 2

#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: -50%; <--- here 
} 

보인다 내 HTML 때 내가 한 번 더 탐색 항목이 있기 때문에 상관없이 탐색 항목의 이러한 항목을 중심으로하는 방법이 있나요 그것을하기 위해. CSS에서 다음

<div id="cssmenu"> 
    <ul class="menu"> 
    ... 

을 :

ul.menu { 
    position: relative; 
    left: 50%; 
} 

을 그리고 jQuery를 :

Answer 3

주 ul에 클래스를 추가

var $menu = $('ul.menu'); 
$menu.css('margin-left', -$menu.outerWidth()/2 +'px');​ 

데모 :http://jsfiddle.net/elclanrs/4TcsP/1/

Answer 4

메뉴를 인라인 블록으로 표시하고 #cssmenu text-align : center를 설정하십시오.

#cssmenu > ul { 
    display: inline-block 
} 
#cssmenu { 
    text-align: center; 
} 

추신 : 메뉴 항목뿐만 아니라 클래스 이름도 메뉴 컨테이너에 제공하는 것이 좋습니다. ,

#cssmenu ul { 
    left: 50%; 
} 
#cssmenu ul li{ 
    right: 50%; 
} 

그렇지 않은 경우 :