Как центрировать навигационную панель в CSS

Question

Я хочу, чтобы панель навигации в верхней части моей веб-страницы была центрирована. Я искал часы и просто не могу заставить это работать.

вот мой HTML, который я хочу сосредоточить.

<div id="nav"> 
<ul> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li>   
    <li><a href="#">My CV profile</a></li> 
</ul> 

и вот некоторые CSS я нашел в Интернете, что оленья кожа достаточно работать полностью.

#nav { 
width: 100%; 
float: left; 
margin: 0 0 1em 0; 
padding: 0; } 

#nav ul { 
list-style: none; 
width: 800px; 
margin: 0 auto; 
padding: 0; } 

#nav li { 
float: left; } 

#nav li a { 
display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-family: 'calibri light', arial; 
color: #069; } 

Я довольно бескомпромиссный разработчик, как есть, но я пропущу что-то очевидное?

Answer 1

Здесь works.just изменения атрибута Левого поля в соответствии с вашего требованием

#nav { 
 
width: 100%; 
 
float: left; 
 
margin-left:300px; 
 
padding: 0; } 
 

 
#nav ul { 
 
list-style: none; 
 
width: 800px; 
 
margin: 0 auto; 
 
padding: 0; } 
 

 
#nav li { 
 
float: left; } 
 

 
#nav li a { 
 
display: block; 
 
padding: 8px 15px; 
 
text-decoration: none; 
 
font-family: 'calibri light', arial; 
 
color: #069; }

<div id="nav"> 
 
<ul> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li>   
 
    <li><a href="#">My CV profile</a></li> 
 
</ul>

Answer 2

Вы можете установить текст выравнивать центр для родителей и дисплея: встроенный блок в детях к центру. Пример:

#nav { 
 
background: #fff; 
 
width: 100%; 
 
text-align: center; 
 
width: 100%; 
 
padding: 0; 
 
} 
 

 
#nav ul { 
 
list-style: none; 
 
margin: 0 auto; 
 
padding: 0; } 
 

 
#nav li { 
 
display: inline-block; 
 
} 
 

 
#nav li a { 
 
display: block; 
 
padding: 8px 15px; 
 
text-decoration: none; 
 
font-family: 'calibri light', arial; 
 
color: #069; }

<div id="nav"> 
 
<ul> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li>   
 
    <li><a href="#">My CV profile</a></li> 
 
</ul>