Foros del Web » Creando para Internet » CSS »

Cómo centrar horizontalmente una capa dentro del sitio?

Estas en el tema de Cómo centrar horizontalmente una capa dentro del sitio? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/01/2007, 19:39
Avatar de marcosr  
Fecha de Ingreso: agosto-2005
Ubicación: Montevideo, Uruguay
Mensajes: 451
Antigüedad: 12 años, 3 meses
Puntos: 5
Pregunta Cómo centrar horizontalmente una capa dentro del sitio?

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 !
  #2 (permalink)  
Antiguo 01/02/2007, 00:47
 
Fecha de Ingreso: diciembre-2003
Ubicación: Campehce, Mexico
Mensajes: 325
Antigüedad: 14 años
Puntos: 0
Re: Cómo centrar horizontalmente una capa dentro del sitio?

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-left0px;
    
margin-top0px;
    
margin-right0px;
    
margin-bottom0px;
}
{
    
font-family:ArialHelveticasans-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)
  #3 (permalink)  
Antiguo 01/02/2007, 07:47
Avatar de marcosr  
Fecha de Ingreso: agosto-2005
Ubicación: Montevideo, Uruguay
Mensajes: 451
Antigüedad: 12 años, 3 meses
Puntos: 5
Re: Cómo centrar horizontalmente una capa dentro del sitio?

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

Un abrazo.
  #4 (permalink)  
Antiguo 01/02/2007, 08:12
Avatar de ventanazul  
Fecha de Ingreso: noviembre-2002
Ubicación: Lima, Peru
Mensajes: 246
Antigüedad: 15 años, 1 mes
Puntos: 2
Re: Cómo centrar horizontalmente una capa dentro del sitio?

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.
__________________
Alexis Bellido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:07.