Cómo centrar horizontalmente una capa dentro del sitio?

marcosr · #1 (**permalink**) 31/01/2007, 19:39

Hola, estoy intentando centrar horizontalmente un div dentro de mi página y no puedo, he leído cosas en Internet pero simplemente no me funcionaron para nada, creo que es porque no se ajusta a mis necesidades.

Dejo una simple idea de mi sitio para ver si logramos realizar algo que se ajuste a mis necesidades:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenido</title>
<style type="text/css">
<!--
/* Etiquetas */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#111111
	
/* Capas */
}
#contenedor {
	position:absolute;
	width:auto;
	height:auto;
	z-index:1;
	left:0px;
	top:0px;
	margin:auto;
}
#centrado {
	width:760px;
	height:auto;
	z-index:2;
	left:0px;
	top:0px;
}
#superior {
	position:absolute;
	width:760px;
	height:100px;
	z-index:3;
	left:0px;
	top:0px;
	background-color:#666666;
}

-->
</style>
</head>
<body>
	<div id="contenedor">
		<div id="centrado">
			<div id="superior">
			</div>
		</div>
	</div>
</body>
</html>

Saludos !

ThunderFx · #2 (**permalink**) 01/02/2007, 00:47

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenido</title>
<style type="text/css">
<!--
/* Etiquetas */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#111111
    
/* Capas */
}
#contenedor {
    width:760px;
    z-index:1;
    left:0px;
    top:0px;
    margin:0 auto;
}
#centrado {
    width:760px;
    height:auto;
    z-index:2;
    left:0px;
    top:0px;
}
#superior {
    width:760px;
    height:100px;
    z-index:3;
    left:0px;
    top:0px;
    background-color:#666666;
}

-->
</style>
</head>
<body>
    <div id="contenedor">
        <div id="centrado">
            <div id="superior">
            </div>
        </div>
    </div>
</body>
</html>

Bendiciones.. algo he aprendido :D espero no estar mal, no soy experto sino experimento hasta que logró dar con el problema (no siempre)

marcosr · #3 (**permalink**) 01/02/2007, 07:47

Hola !
Te agradezco muchísimo la repuesta.
Me ha funcionado !

Un abrazo.

ventanazul · #4 (**permalink**) 01/02/2007, 08:12

Para centrar elementos de bloque (DIV, P, etc) necesitas definir un ancho (width) y asignar márgenes automáticos (margin: auto), sería importante mencionarlo, además de publicar el código.

Imagino que los ID que se usan en el código son simplemente con fines didácticos pues lo ideal es no usar etiquetas que guardan relación con la apariencia sino con el contenido de cada elemento.

Saludos.