Centralizar menu

[oedgaraz]

Boa tarde galera, sou novato aqui. Então, faz algum tempo que estou tendo problemas em centralizar o menu do meu blog, gostaria de pedir a ajuda de vocês...

Segue o codigo:

<!-- Start - Navigation

-->

<div class='nav'>

<ul class='menu' id='menu'>

<li><a expr:href='data:blog.homepageUrl'>home</a></li>

<li><a href='http://edgargd.blogspot.com.br/p/about.html'>Sobre</a></li>

<li><a href='http://edgargd.blogspot.com.br/p/servicos.html'>Serviços</a></li>

<li><a class='drop-ctg' href='#'>Galeria</a>

<ul>

<li><a href='http://edgargd.blogspot.com.br/search/label/masculino?max-results=6'>Masculinos</a></li>

<li><a href='http://edgargd.blogspot.com.br/search/label/feminino?max-results=6'>Femininos </a></li>

<li><a href='http://edgargd.blogspot.com.br/search/label/Casais?max-results=6'>Casamentos</a></li>

</ul>

</li>

<li><a href='http://edgargd.blogspot.com.br/p/contato_03.html'>Contato</a></li>

</ul>

</div>

<!-- End - Navigation Menu -->

CSS

/* =============================

Navigation

============================= */

*{

margin:0;

padding:0;

outline:0;

}

.nav {

width:940px;

height:0 auto;

border-bottom:1px solid #eee;

margin:10px auto 5px;

display:inline-block;

}

.menu {

width:auto;

list-style:none;

font:$lisnavifont;

text-align:center;

margin:0 auto;

}

.menu a {

position:relative;

float:center;

color:#999;

text-decoration:none;

text-transform:uppercase;

width:auto;

line-height:36px;

padding:0 60px;

}

.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:center;

padding-left:10px;

color:#444;

}

.menu ul li a:hover{

background:#fdfdfd;

color:#777;

}

/* =============================

Wrapper

============================= */

#total-wrapper {

margin: 0 auto;

padding 0 10px;

background:#fff;

width:1000px;

}

#outer-wrapper{

width:940px;

margin:0;

padding:5px 20px 0;

text-align:$startSide;

font:$bodyfont;

}

#main-wrapper {

width:680px;

float:$endSide;

word-wrap:break-word;

overflow:hidden;

}

#sidebar-wrapper{

width:240px;

float:$startSide;

word-wrap:break-word;

overflow:hidden;

}

[Markus Magnus]

Cara acabei de abrir o seu blog http://edgargd.blogspot.com.br/, muito bonito, diga-se de passagem, mas o menu está centralizado a única coisa que não está centralizada é a palavra "FOTOGRAFIA".

Talvez também o que você esteja chamando de desalinhamento é o fato de que cada <li> do menu tenha um tamanho isso você pode resolver trocando o width: auto; em .menu li por um valor fixo. O seu menu tem 940px dividido pelos 6 menus você tem 156,6px para cada ou use uma porcentagem 100% dividido por 6 é igual à 16,66%.

Obs.: do jeito que está cada <li> tem um tamanho porém o espaço vazio entre as letras de um menu e de outro são iguais. Do jeito que eu te falei a largura de cada <li> será igual, mas os espaços vazios entre elas serão diferentes.

Espero ter ajudado.

Tudo de bom.

[Oclácio Silva]

olá meu caro,

Muito bonito seu site parabéns cara...

Você pode adicionar a tag <center></center>

seu código ficaria assim:

<!-- Start - Navigation

-->

<center>

<div class='nav'>

<ul class='menu' id='menu'>

<li><a expr:href='data:blog.homepageUrl'>home</a></li>

<li><a href='http://edgargd.blogs...>Sobre</a></li>

<li><a href='http://edgargd.blogspot.com.br/p/servicos.html'>Serviços</a></li>

<li><a class='drop-ctg' href='#'>Galeria</a>

<ul>

<li><a href='http://edgargd.blogs...ulinos</a></li>

<li><a href='http://edgargd.blogs...o?max-results=6'>Femininos </a></li>

<li><a href='http://edgargd.blogs...mentos</a></li>

</ul>

</li>

<li><a href='http://edgargd.blogs...ontato</a></li>

</ul>

</div>

</center>

<!-- End - Navigation Menu -->

[milib]

É só colocar este código no seu css:

ul {list-style:none; position:relative; left:23%;}

obs; a porcentagem de left você determina comforme o px da caixa div menu.