Centrar Div

pasada.net · #1 (**permalink**) 11/11/2006, 21:45

Buenas me gustaria que alguien me dijese como puedo centrar este Div en la pagina web para que no se me queda todo a la izquierda sino que siempre esten las imagenes centradas en la web .. gracias

aqui esta la direccion web http://www.pasada.net/index1.html

elrauli · #2 (**permalink**) 11/11/2006, 22:04

Hola, por lo que vi en tu código fuente estás utilizando mal las propiedades de estilo ya que lo estás haciendo como si fueran atributos de la etiqueta div.

Esto está mal...

Código HTML:

<div width="80%"></div>

Así está mejor...

Código HTML:

<div style="width:80%"></div>

Pero estaría aun mejor si los estilos los definieras dentro de una hoja de estilos (dentro del documento o aparte).

Para centrar un div podrías establecer sus márgenes así:

Código HTML:

#tu_div
{
	margin-left:auto;
	margin-right:auto;
}

PD: También noté que a tu página le falta la etiqueta de apertura de <body>.

Saludos,

Raúl

pasada.net · #3 (**permalink**) 12/11/2006, 09:07

Je Je no se xq no tenia el body abierto :S buena cagada :(

lo he subido a la web http://www.pasada.net/index1.html lo tengo modificado y no logro centrarlo todavia bien :(

elrauli · #4 (**permalink**) 12/11/2006, 09:45

Te paso un ejemplo siguiendo más o menos tu código...

Hoja de estilos:

Código HTML:

#menu
{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

/*Con esto te queda el tamaño del contenedor a 80% y centrado*/


#fila_1
{
	text-align:center;
}

/*...y con esto otro centrás el contenido de la fila 1*/

Documento:

Código HTML:

<div id="menu">
	<div id="fila_1">
		bla, bla, bla...
	</div>
</div>

Salux!

Raúl

pasada.net · #5 (**permalink**) 12/11/2006, 09:51

te subo ala web las modificaciones q me dijiste ... no veo ningun cambio :(

elrauli · #6 (**permalink**) 12/11/2006, 09:55

Mostrame la hoja de estilos para que te pueda ayudar mejor!

Edito: No me pases nada que ya la estoy viendo!!!

Voy a verlo bien...

Salux!

elrauli · #7 (**permalink**) 12/11/2006, 10:01

A ver si es esto...

Hubo un error de tipeo de mi parte y te puse:

Código HTML:

margint-left:auto;

cuando debí haber puesto:

Código HTML:

margin-left:auto;

en el selector #menu.

Cambialo a ver si funciona...

pasada.net · #8 (**permalink**) 12/11/2006, 10:03

y yo fui tan gilipollas de no darme cuenta de que sobraba la t :(

pasada.net · #9 (**permalink**) 12/11/2006, 10:06

sta online puesto pero no se me centra del todo en la pagina no?

elrauli · #10 (**permalink**) 12/11/2006, 11:37

Bueno... lo que sucede es que dentro de la fila 1 el contenido no es un texto sino una lista (elemento de bloque) en la que cada li es de ancho variable y por eso no se puede centrar.

La solución sería esta:

En la hoja de estilos:

Código HTML:

#menu
{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

#menu ul
{
	margin:0px;
	padding:0px;
	list-style:none;
}

#menu ul li
{
	float:left;
	width:25%;
	margin:0px;
	padding:0px;
	text-align:center;
}

En el documento:

Código HTML:

<div id="menu">
	<div id="fila_1">
		<ul>
			<li>
				<a href="h*ttp://w*ww.pasada.net/pau-gasol/"><img border="0px" src="h*ttp://w*ww.pasada.net/pau-gasol/p/20p.jpg" width="80px" height="63px" alt="Pau Gasol" /></a><br />
				Pau Gasol
			</li>
			<li>
				<a href="h*ttp://w*ww.pasada.net/michelle-lombardo/"><img border="0px" src="h*ttp://w*ww.pasada.net/michelle-lombardo/p/3p.jpg" width="80px" height="91px" alt="Michelle Lombardo" /></a><br />
				Michelle Lombardo
			</li>
			<li>
				<a href="h*ttp://w*ww.pasada.net/federica-ridolfi"><img border="0px" src="h*ttp://w*ww.pasada.net/federica-ridolfi/p/2p.jpg" width="53px" height="80px" alt="Federica Ridolfi" /></a><br />
				Federica Ridolfi
			</li>
			<li>
				<a href="h*ttp://w*ww.callejondiagon.com/foro"><img border="0px" src="h*ttp://w*ww.pasada.net/caliz-de-fuego/post/8p.jpg" width="100px" height="135px" alt="Callejon Diagon Foro" /></a><br />
				Registrate y Participa!!
			</li>
		</ul>
	</div>
</div>

Probalo y decime si te anduvo...

Saludos,

Raúl