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
Cita: <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
Cita: #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.
