Tengo el siguiente menú, pero necesito que el texto texto aparezca centrado.
Así se ve ahora:
Este es el código:
CSS:
Código HTML:
#multicolorido{ margin-left:auto; margin-right:auto; width: 900px; } #menu1 { margin:0px auto; height:33px; } #menu1 ul { margin:0; padding:0; padding-top:12px; list-style:none; } #menu1 li { box-shadow: 1px 1px 1px 1px #7a7a7a; border-radius: 15px 15px 0 0; float:left; margin:0 !important; padding:0 1px 0 0 !important; font-family: 'Verdana', arial, serif; list-style:none; } #menu1 a { font-size: 12px; font-family: 'Verdana', arial, serif; float:left; text-decoration:none; color:#fff; margin:0; padding:12px 10px; width:72px; } #menu1 a:hover { text-decoration:none; color:#000; } #menu1 ul li.naranjo{ /*Naranjo*/ background: #f59c1b; } #menu1 ul li.naranjo:hover{ } #menu1 ul li.celeste{ /*Celeste*/ background: #00addf; } #menu1 ul li.celeste:hover{ } #menu1 ul li.verde{ /*Verde*/ background: #a2c64e; } #menu1 ul li.verde:hover{ } #menu1 ul li.rojo{ /*ROJO*/ background: #e02309; } #menu1 ul li.rojo:hover{ } #menu1 ul li.gris{ /*GRIS*/ background: #4d4c4c; } #menu1 ul li.gris:hover{ }
Código HTML:
<div id='multicolorido'><div id='menu1'> <ul> <li class='naranjo'><a href='#'>cocina</a></li> <li class='celeste'><a href='#'>bebidas</a></li> <li class='verde'><a href='#'>música</a></li> <li class='rojo'><a href='#'>cine</a></li> <li class='gris'><a href='#'>interés</a></li> </ul> </div></div>