¿Menú horizontal con los botones centrados?

[JSGarcia91]

Hola, buenas noches. Me ha surgido un problema, he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil. Ahora quería modificar algo que no aparecía en el tutorial y era centrar los botones automáticamente de forma horizontal, es decir que siempre aparecieran los botones en el centro de la pantalla y en caso de añadir o quitar algún botón que se quedara siempre centrado, he estado cambiando propiedades a los elementos para que se quedaran centrados los botones pero no he llegado a conseguirlo, hacía que se mostrara como inline-block y luego centraba con el auto, pero nada.

Ahora mismo se me queda así el menú:


El div de atrás ocupa todo el ancho de la página y quiero centrar los botones para que queden siempre centrados, pero no hay manera, os dejo los códigos para ver si me podéis echar una mano.

HTML

<div id="menuhor">
<ul id="boton">
<li><a href="#">Botón 1</a></li>
<li><a href="#">Botón 2</a></li>
<li><a href="#">Botón 3</a></li>
<li><a href="#">Botón 4</a></li>
</ul>
</div> <!-- Cierre de "menuhor" -->

CSS

#menuhor {
width: auto;
height: 50px;
margin-left: -8px;
margin-right: -8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: -16px; /* Margen superior negativo para pegar el menu al div con id "fondo_encabezado" */
}

#boton {
padding: 0px;
margin: auto;
/*margin-left: 28%; /* Modificar el margin para centrar los botones cuando se añado o quite alguno */
}

#boton li {
display: inline;

}

#boton li a {
line-height: 30px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;

}

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}

Un saludo y gracias por la ayuda.

[flashmax]

Hola haber si así lo solucionas!!

Código HTML:

#menuhor {
width: 100%;
height: 50px;
margin-left: 8px;
margin-right: 8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: 16px; /* Margen superior negativo para pegar el menu al div con id "fondo_encabezado" */
}

#boton {
padding: 0px;
margin: auto;
text-align:center;
/*margin-left: 28%; /* Modificar el margin para centrar los botones cuando se añado o quite alguno */
}

#boton li {
display: inline;

}

#boton li a {
line-height: 30px;	
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;

} 

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}

[JSGarcia91]

GRACIAS flashmax SI QUE FUNCIONA

Dejo el código por si a alguien le sirviera el código.

HTML

<div id="menuhor">
<ul id="boton">
<li><a href="#">Botón 1</a></li>
<li><a href="#">Botón 2</a></li>
<li><a href="#">Botón 3</a></li>
<li><a href="#">Botón 4</a></li>
<li><a href="#">Botón 5</a></li>
</ul>
</div> <!-- Cierre de "menuhor" -->

CSS

/* M E N U H O R I Z O N T A L */

#menuhor {
width: auto;
height: 50px;
margin-left: -8px;
margin-right: -8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: 0px;
}

#boton {
padding: 0px;
margin: auto;
text-align: center;
}

#boton li {
display: inline;
}

#boton li a {
line-height: 30px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
}

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}