El código html es:
Código HTML :
<html> <HEAD> <TITLE>Prueba Menu</TITLE> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <LINK rel="StyleSheet" type="text/css" href="estilo.css"> </HEAD> <BODY> <ul id="navi"> <li><a href="#" id="inicio"><span>inicio</span></a></li> <li><a href="#" id="acerca"><span>acerca de</span></a></li> <li><a href="#" id="contacto"><span>contactos</span></a></li> </ul> </BODY> </html>
Y el archivo .css es:
Código HTML :
#navi {
list-style:none;
margin:0 auto;
padding:0;
text-align:center;
}
#navi li {
padding:0;
float:left;
}
#navi li a {
display:block;
width:200px;
height:200px; /*Quito el padding, pero le pongo altura.*/
text-decoration:none;
}
#navi li a:hover {
background-image:url(images/tele2.png);
}
#navi li a span {
display:none; /*Oculto el texto.*/
}
#inicio {
background-image:url(images/tele1.png);
}
#acerca {
background-image:url(images/tele1.png);
}
#contacto {
background-image:url(images/tele1.png);
}
body{
text-align:center;
background-color: green;
}
He probado de todo! No hay manera de que se quede en el centro. Mi idea es hacer una etiqueta contenedor, y ahí meter el menú. Pero vamos, para acortar, ya que solo es una prueba, pues uso el body y ya está. Le pongo a body el text-align: center, y no se centra... No se me ocurre nada mas!
Alguien sabe como hacer que el menú quede en el centro? Muchas grácias!
