CSS 센터링 인라인 navia

내 수업을 위해 만든 nav 메뉴를 중심으로 문제가 발생했습니다. 모든 텍스트 정렬, 여백 왼쪽/여백 -rgiht를 시도하고 html 등으로 가운데에 정렬했습니다. 찾은 모든 사이트에서 나에게 알려줍니다. margin-left : 자동; margin-right : 자동; 하지만 그 doesnt 일. 다음은 페이지를 자동으로 중앙에 배치해야하는 메뉴입니다.CSS 센터링 인라인 navia

<div class="menu"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="artwork.html">Artwork</a> 
     <ul> 
      <li><a href="#">Pencil</a></li> 
      <li><a href="#">Pastel</a></li> 
      <li><a href="#">Color Pencil</a></li> 
      <li><a href="#">Charcoal</a></li> 
      <li><a href="#">Digital</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Projects</a> 
     <ul> 
      <li><a href="#">74 Duster</a></li> 
      <li><a href="#">The "Beast"</a></li> 
      <li><a href="#">Darkness and Hope</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">Who I am and why it matters</a></li> 
      <li><a href="#">Contact Me</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

그리고 여기가에 대한 CSS입니다 : 어떤 도움이 많이 주시면 감사하겠습니다

.menu { 
margin-right:auto; 
margin-left:auto; 
max-width:700px; 
display:inline-block; 
padding:0px; 
font-size:14px; 
font-weight:bold; 
text-align:center; 
} 

.menu ul { 
width:700px; 
background:#333333; 
height:35px; 
list-style:none; 
margin:0; 
padding:0; 
text-align:center; 
} 

.menu li { 
width:175px; 
text-align:center; 
float:left; 
padding:0px; 
} 

.menu li a { 
background:#333333; 
color:#cccccc; 
display:block; 
font-weight:normal; 
line-height:35px; 
margin:0px; 
padding:0px 25px; 
text-align:center; 
text-decoration:none; 
} 

.menu li a:hover, .menu ul li:hover a { 
background: #2580a2; 
color:#FFFFFF; 
text-decoration:none; 
} 

.menu li ul { 
display:none; 
height:auto; 
padding:0px; 
margin:0px; 
border:0px; 
position:absolute; 
width:175px; 
z-index:200; 
} 

.menu li:hover ul { 
display:block; 

} 

.menu li li { 
display:block; 
float:none; 
margin:0px; 
padding:0px; 
width:175px; 
} 

.menu li:hover li a { 
background:none; 
} 

.menu li ul a { 
display:block; 
height:35px; 
font-size:12px; 
font-style:normal; 
margin:0px; 
padding:0px 10px 0px 15px; 
text-align:left; 
} 

.menu li ul a:hover, .menu li ul li:hover a { 
background:#2580a2; 
border:0px; 
color:#FFFFFF; 
text-decoration:none; 
}

, 또는 당신이 방법을 알고있는 경우에 그 것 시청자의 해상도로 전체 웹 페이지와 규모의 콘텐츠를 중앙에 잘해라.

출처

2013-04-16 Fractal Fear