CSS를 사용하여 내 탐색 모음의 가운데 맞추기를 시도 중

Question

내 CSS를 사용하여 내비게이션 막대를 가운데 맞춤하려고합니다. 나는 float을 제거하여 중심에 올릴 수있었습니다 : left; nav ul li에서. 그러나 그렇게하면 내비게이션 항목이 내 페이지 본문과 겹쳐집니다. 즉, 더 이상 페이지 상단에 탐색이 설정되지 않습니다.

ul { 
     display: inline-block; 
     margin-top: 5px; 
    } 

    nav { 
     list-style:none; 
     margin:0; 
     padding:0; 
     text-align:center; 
    } 

    nav ul { 
     /*height: 1px*/ 
     list-style:none; 
     margin:0; 
     padding:0; 
     text-align:center; 
     display: inline; 
     text-align: center; 
     /*float: right;*/ 
     font-size: 3em; 
     list-style: none; 
     /*margin: 5px 0 0 0;*/ 
    } 

    nav ul li { 
     /*height: 1px;*/ 
     display: inline-block; 
     font-family: Tahoma, Verdana, Helvetica, Sans-Serif; 
     font-size: .5em; 
     float:left; 
     margin-left: 30px; 
    } 

Answer 1

이이

 nav{ 
      margin-top:0; 
      margin-bottom:0; 
      margin-left:auto; 
      margin-right:auto; 
      width:300px; 
      } 



      nav{ 

       margin:0 auto; 
       width:300px; 
      } 

당신의 폭이 크기에만 300 픽셀을 사용하고를 탐색 할 수있는 시도 : 여기

<nav> 
     <ul> 
     <li><a href="~/">Home</a></li> 
     <li><a href="~/Products">Products</a></li> 
     <li><a href="~/About">About Us</a></li> 
     </ul> 
    </nav> 

내 CSS에서 절입니다 : 여기 내 HTML입니다 일러스트 레이션을 위해. width 속성은 essentail이므로 브라우저가 없으면 브라우저를 가운데에 놓을 수 없기 때문입니다.