Como alinho meu menu ao centro

[monteirof7 1]

Olá pessoal, sou novo no forum e no mundo de desenvolvimento web, tenho conhecimento muito básico.

 

Gostaria da ajuda de vcs para me ajudarem a centralizar meu menu na pagina, digo, as opções dele.

 

 

Assim é como ele está, quero que cada uma dessas Posic. cheguem para o lado direito, de maneira que se alinhem ao centro, e que eu posso sempre colocar/removar um delas sem que elas não saiam do centro.

 

Aqui está meu html:

<ul class="menuhorizontal">

<li class="btnesquerdo"><a href="../posicionamento/p3.html">Posic. 3</a></li>
<li><a href="../posicionamento/p4.html">Posic. 4</a></li>
<li><a href="../posicionamento/p5.html">Posic. 5</a></li>
<li><a href="../posicionamento/p6.html">Posic. 6</a></li>
<li><a href="../posicionamento/p7.html">Posic. 7</a></li>
<li><a href="../posicionamento/p7.html">Posic. 7</a></li>
<li><a href="../posicionamento/p7.html">Posic. 7</a></li>
<li><a href="../posicionamento/p7.html">Posic. 7</a></li>

</ul>

aqui está meu css:

.menuhorizontal{
margin: 0;
padding: 0;
width: 120%;
height: 30px;
background:#cccccc;
;

}



.menuhorizontal ul{ 
list-style: none;
margin:auto;
}


.menuhorizontal li{ 
display: inline;
float: left;
padding:0px;
margin: 0;
width: 80px;
border-left: #666666 thin solid;
}



.menuhorizontal a{
display: block;
text-decoration: none;
padding: 6px;
background-color: #CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align:center;
}


.menuhorizontal :hover{
background-color: #EEEEEE;
text-decoration: none;
color: #FFFFFF;
}


.menuhorizontal li.btnesquerdo{
border: none;}

Agradeço desde já a ajuda de vcs!

[william_123 0]

marTente usar a porcentagem que vai...

Tipo.. 50% seria a metade ou o "meio" ...

Olha só:

 

.menuhorizontal {

margin-left: 50%;
padding: 0;
width: 120%;
height: 30px;
background:#cccccc;

}

[Guilherme Souza Santos 6]

Tente isso.

.menuhorizontal{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 30px;
  background:#cccccc;
  text-align: center;
}

.menuhorizontal li{ 
  display: inline-block;
  padding:0px;
  margin: 0;
  width: 80px;
  border-left: #666666 thin solid;
}

[Electronic 124]

Na regra .menuhorizontal

troque o

margin: 0;

por

margin: 0 auto;

[monteirof7 1]

A solução do Guilherme Souza Santos funcionou muito bem.

 

Obrigado a todos!!!

[Electronic 124]

mais informação

 

http://css-tricks.com/centering-css-complete-guide/

 

http://jsfiddle.net/r7EwW/