Hola,
Sé que es triste unirse al foro con un mensaje de ayuda y seguramente sea una tontería de novato.
Tengo una lista ul a la que le he añadido una serie de modificaciones para convertirlo en pestañas que harán de enlaces a mi web portfolio que estoy creando.
El problema es que el texto no se queda centrado. Se queda un poco más arriba. Para intentar solucionarlo le aplique una etiqueta span e intente jugar con el margin y el padding. Nada el texto no se mueve.
He copiado el texto y le he quitado el span porque no sirve.
Muchas gracias.
Código HTML:
Ver original <li id="botones"><a href="¿Quien soy.html">¿Quién soy?
</a></li> <li id="botones"><a href="#">¿Qué puedo hacer por ti?
</a></li> <li id="botones"><a href="#">Contacta conmigo
</a> </li> <li id="botones"><a href="#">Blog
</a> </li>
Código CSS:
Ver original#botones {
float: left;
width: 155px;
padding: 4px;
margin: 4px;
height: 25px;
border-radius: 10px 0px;
text-align: center;
background-color: #CCCCCC;
-webkit-box-shadow: inset 2px 2px 1px #666666;
box-shadow: inset 2px 2px 1px #666666;
-webkit-transition: all 2ms ease-in-out 0s;
-moz-transition: all 2ms ease-in-out 0s;
-ms-transition: all 2ms ease-in-out 0s;
-o-transition: all 2ms ease-in-out 0s;
transition: all 2ms ease-in-out 0s;
}
#botones a {
text-decoration: none;
color: #FFFFFF;
text-align: center;
-webkit-transition: all 2ms ease-in-out 0s;
-moz-transition: all 2ms ease-in-out 0s;
-ms-transition: all 2ms ease-in-out 0s;
-o-transition: all 2ms ease-in-out 0s;
transition: all 2ms ease-in-out 0s;
}
#botones:hover {
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(78,78,78,0.20)),color-stop( 100% , rgba(78,78,78,0.20)));
background-image: -webkit-linear-gradient(270deg,rgba(78,78,78,0.20) 0%,rgba(78,78,78,0.20) 100%);
background-image: linear-gradient(180deg,rgba(78,78,78,0.20) 0%,rgba(78,78,78,0.20) 100%);
}