Problema para centrar menú horizontalmente

iraultza · #1 (**permalink**) 16/05/2005, 13:30

Hola!

Soy nuevo por los foros y vengo con una preguntita para ver si alguien me la puede solucionar. El caso es que tengo hecho un menú horizontal en css, vamos, que realmente no viene siendo más que una lista. El caso es que me sale en el navegador siempre alineada horizontalmente a la izquierda.

Me gustaría saber cómo puedo centrarla. He probado con mil y una etiquetas... pero sin ninguna suerte. Cuál se supone que es la etiqueta y su propiedad "oficial" para poder centrar una lista?

Lo único que se me ha ocurrido ha sido hacer un padding left y centrarlo de esta manera, pero claro, está el tema de que sólo se verá bien con una resolución. También he pensado en hacer esto y con una función javascript detectar la resolución del visitante y redireccionarle a uno u otro css en el que el padding left variaría dependiendo de la resolución.

Si alguien sabe la etiqueta que tengo que usar o en el otro caso la función javascript apropiada se lo agradecería de por vida, ya que este asunto me está volviendo loco.

Un saludo y gracias de antemano!!

damianx · #2 (**permalink**) 16/05/2005, 13:38

te sugiero que uses:

text-align:center;

que seria lo mismo que usar el align en un <td> si es que esta dentro de una celda.
<td align="center">

en caso contrario podes probar tambien dandole un ancho fijo a la estructura que contenga el texto y a esa misma estrucutra darle el align center.

Saludos.

damianx · #3 (**permalink**) 16/05/2005, 13:40

Aclaracion: el align center lo debe tener la estrucutura que contenga la lista, no la lista en si.
Saludos!

iraultza · #4 (**permalink**) 16/05/2005, 13:45

Lo primero, gracias por responder tan rápido.

Probé el align-center en la estructura, fue lo primero que hice... y nada. Supongo que debería funcionar... pero no lo hace. La lista con todos los elementos sigue centrada a la izquierda.

He ahí mi ofuscación.

Un saludo!

kahlito · #5 (**permalink**) 16/05/2005, 14:05

Hola iraultza, puedes intentarlo asi:

Código HTML:

<style type="text/css">
ul {
	text-align: center;
}
li {
	text-align: center;
}
</style>
</head>
<body>
<div id="centrarlista"><ul>Tu lista
<li>Uno</li>
<li>Dos</li></ul>
</div>
</body>

Saludosss

iraultza · #6 (**permalink**) 17/05/2005, 01:28

Hola!!

Probé este último código y tampoco me funciona. Os paso el código css a ver si así me podéis ayudar mejor. Gracias y un saludo.

Código HTML:

#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; WIDTH: 100%; 

LINE-HEIGHT: normal _position: absolute; _top: 50%;
}
#header UL { 
	 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none 

_position: absolute; _top: 50%; text-align: center;
}

#header LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; 

FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; text-align: center;
}

kahlito · #7 (**permalink**) 17/05/2005, 06:12

Hola de nuevo.

Tienes mezclado varias opciones por eso no te lo coje, prueba así:

Código HTML:

<style type="text/css">
ul {
	text-align: center;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-image: none;
	}
li {
	padding:0px;
	margin:0px; 
	background: url(left.gif) no-repeat left top; 
	text-align: center;
}
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; WIDTH: 100%;} 
</style>
</head>

<body><div id="header"><ul>Mi lista
<li>Uno</li>
<li>Dos</li>
</ul>
</div>
</body>

Como verás en el UL no hace falta la posicion abosluta y el 50% en el top, en el LI tampoco hace falta que flote a la izquierda si quieres tenerlo en el centro, tambien he resumido el paddin que en vez de poner los 4 con el mismo tamaño puedes poner solo 1.

Creo que es lo que buscas, si lo que quieres es ponerlo todo en el centro verticalemente es otra cosa.

Saludosss

iraultza · #8 (**permalink**) 18/05/2005, 02:51

Hola!

En estos días he probado el código que me pusiste y tampoco me funcionó. Tenía el código fuente tan trasteado que al final he decidido empezar de 0 a hacer el menú, creo que es lo mejor. Si lo consgio centrar, explicaré aquí el código para compartirlo con los que puedan tener el mismo problema que yo.

Gracias a todos!!