Панель навигации центра с CSS

Question

Я пытаюсь центрировать мой навигационный бар. Я проверил свои сайты, но ничего не работает и я полностью озадачен, почему он не будет центром, здесь моя панель навигации HTML, что я хочу от центра:

<div class='nav'> 
<ul class='menu' id='menu'> 
<li><a expr:href='data:blog.homepageUrl'>home</a></li> 
<li><a class='drop-ctg' href='#'>PORTFOLIO</a> 
    <ul> 
    <li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li> 
    <li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li> 
    <li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li> 

    </ul> 
</li> 
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li> 
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li> 
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li> 


</ul> 
</div> 

и вот CSS

*{ 
    margin:0; 
    padding:0; 
    outline:0; 
} 
.nav { 
    width:950px; 
    height:auto; 
    border-bottom:1px solid #eee; 
    margin:10px auto 5px; 
    display:inline-block; 
} 
.menu { 
    width:auto; 
    list-style:none; 
    font:$pagenavifont; 
    text-align:center; 
    margin:0 auto; 
} 
.menu a { 
    float:left; 
    color:#999; 
    text-decoration:none; 
    text-transform:uppercase; 
    width:auto; 
    line-height:36px; 
    padding:0 20px; 
} 
.menu a:hover,li.menuhover a{ 
    color:#111; 
} 
.menu li { 
    position:relative; 
    float:left; 
    width:auto; 
} 
.menu li:last-child { 
    background:none; 
} 
.menu ul{ 
    display:none; 
    position:absolute; 
    top:36px; 
    left:0; 
    background:#fbfbfb; 
    display:none; 
    list-style:none; 
} 
.menu ul li{ 
    float:none; 
    border-top:1px solid #e3e3e3; 
    border-right:1px solid #e3e3e3; 
    border-left:1px solid #e3e3e3; 
    width:auto; 
    background:none; 
} 
.menu ul li:last-child { 
    border-bottom:1px solid #e3e3e3 
} 
.menu ul li a{ 
    float:none; 
    display:block; 
    background:none; 
    line-height:36px; 
    min-width:137px; 
    width:auto; 
    text-align:left; 
    padding-left:10px; 
    color:#444; 
} 

.menu ul li a:hover{ 
    background:#fdfdfd; 
    color:#777; 
} 

Я бы дал вам ссылку на страницу, но это делается в Dreamweaver и пока не в курсе. Логотип logobar.jpg является логотипом для веб-страницы. Мне нравится, как это выглядит, но оно должно быть сосредоточено, а не быть отрезанным или перенесенным на следующую строку, когда я сжимаю свои экраны.

Я пробовал каждый из float: right, float: left и float: none практически на всех классах; text-align: center для каждого класса со стороны html; Я пробовал align=center по каждому классу; display: inline, inline-block на ul и li классов.

Благодарим за помощь!

Answer 1

На вашем классе .menu у вас есть text-align:center комплект. Мы можем, конечно, использовать это, чтобы центрировать дочерние узлы.

Итак, в вашем .menu li css собственности, добавьте display:inline-block и удалите поплавки. Это центрирует ваши элементы списка.

Смотрите скрипку:http://jsfiddle.net/RGREA/

Answer 2

<style> 
div.nav{margin: 3px auto;} 
</style>