[Resolvido] Centralizar Itens do Menu

[Gutto Faria 0]

Já procurei aqui no forum, pela internet, sempre acho a mesma solução (e algumas alternativas), só que não funcionou.

Então vamos ao meu problema.

 

Quero deixar o menu com seus itens centralizados(não o texto do item, mas a junção de todos, centralizados na página).

Segue abaixo o código:

 

#menu_global {
	width:100%;
	height:38px;
	background-color: #469E4F;
	text-align:center;
}
#menu {
	text-align: center;
	width:auto;
}

#menu ul{
	list-style-type: none;
	background-color: #469E4F;
	text-align: center;
	text-transform:uppercase;
	font-size:14px;
}


#menu li{
	position:relative;
	display:inline;
	float: left;
}

#menu ul a{
	display: block;
	padding: 10px 20px 10px 20px;
	background-color: #469E4F;
	color: #FFFFFF;
	text-decoration: none;
}

#menu ul a:hover{
	background-color: #AFD07B;
	text-decoration: none;
}

E agora, vamos ao HTML:

 

    <div id="menu_global" align="center">
    <div id="menu">
    	<ul id="menu">
        	<li><a href="#">home</a></li>
            <li><span><a href="#">sobre</a></span></li>
            <li><span><a href="#">inscrições</a></span></li>
            <li><span><a href="#">programação</a></span></li>
            <li><span><a href="#">notícias</a></span></li>
            <li><span><a href="#">patrocinadores</a></span></li>
            <li><span><a href="#">contato</a></span></li>
        </ul>
    </div>
    </div>

[João Prado 64]

Adicione um margin:0 auto; na div do menu http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

#menu {
 margin:0 auto;
 text-align: center;
 width:auto;
}

[Gutto Faria 0]

Ainda não funcionou! Continua na mesma! =/

[Evandro Oliveira 331]

João, adicionar margem e largura como automáticos, gera uma espécie de confusão no renderizador, afinal para qual dos dois ele deve dar prioridade?

 

Um dos dois parâmetros deve conter um valor escalar, que será usado como referência para o renderizador aplicar o auto na outra propriedade.

 

margin: 0 auto;
width: 300px;

ou

 

margin: 0 15px;
width: auto;

Ambos centralizam o elemento, cada qual com a sua característica.

[Gutto Faria 0]

Funcionou colocando o tamanho exato do menu. Colocando um valor na margin e deixando o width em auto não deu certo.

Mas ainda não é assim que eu gostaria. A intenção é deixar o menu com tamanho automático para que caso venha a adicionar alguma nova opção, funcione sem que eu tenha que alterar o arquivo css.

 

Alguém tem uma outra solução, alteração de código pra me dar uma luz?

[William Bruno 1501]

da uma olhada aqui:

http://ogordo.com/centralizar-menu-sem-width/

[Gutto Faria 0]

Isso! Valeu, cara! Agora ficou perfeito. Vou colocar aqui em baixo o código para os que tiverem a mesma dúvida que eu!

 

#menu_global {
	width:100%;
	height:38px;
	background-color: #469E4F;
	text-align:center;
	float:left;
}
#menu {
	margin:0 auto;
	text-align: center;
	overflow:hidden;
}

#menu ul{
	list-style-type: none;
	text-transform:uppercase;
	font-size:14px;
	position:relative;
	float:left;
	left:50%;
}


#menu li{
	position:relative;
	float: left;
	right:50%;
	margin: 0 auto;
}

#menu ul a{
	display: block;
	padding: 10px 20px 10px 20px;
	color: #FFFFFF;
	text-decoration: none;
}

#menu ul a:hover{
	background-color: #AFD07B;
	text-decoration: none;
}