Centrar div alineado al bottom

FantasmaFito · #1 (**permalink**) 30/08/2010, 10:14

Hola, tengo un div #contenedorCuerpo que logré alinearlo al bottom con el siguiente código:

Código HTML:

#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0px;
}

Lo que necesitaría saber es si hay alguna manera de centrar la página en en navegador, ya que probé con margin:auto pero no ha funcionado.

¿Alguien tendría alguna idea?

Gracias!

Gashe · #2 (**permalink**) 30/08/2010, 10:15

#contenedorCuerpo{
width:1024px;
height:624px;
position: absolute;
bottom:0px;
left:auto;
right:auto;
}

Prueba así

FantasmaFito · #3 (**permalink**) 30/08/2010, 10:18

Cita:

Iniciado por Gashe

#contenedorCuerpo{
width:1024px;
height:624px;
position: absolute;
bottom:0px;
left:auto;
right:auto;
}

Prueba así

Nup, no funciona...

TheDark03 · #4 (**permalink**) 30/08/2010, 10:43

Cita:

Iniciado por FantasmaFito

Hola, tengo un div #contenedorCuerpo que logré alinearlo al bottom con el siguiente código:

Código HTML:

#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0px;
}

!

Estoy confundido

, que es lo que tratas de decir?

Averigua sobre el reseteo de tu hoja de estilos

http://www.google.com.pe/#hl=es&q=re...e12f02ce297b81

Saludos DTB

Caquilla23 · #5 (**permalink**) 30/08/2010, 10:44

Creas un contenedor para #contenedorcuerpo con las siguientes propiedades:

position:relative;
width:1024px
heigth:100%;
margin: 0 auto;

Un saludo.

FantasmaFito · #6 (**permalink**) 30/08/2010, 11:41

Cita:

Iniciado por TheDark03

Estoy confundido

, que es lo que tratas de decir?

Averigua sobre el reseteo de tu hoja de estilos

http://www.google.com.pe/#hl=es&q=re...e12f02ce297b81

Saludos DTB

Osea la idea es que el div se acomode en el bottom del navegador, y que al mismo tiempo quede centrado.

alexk · #7 (**permalink**) 30/08/2010, 11:51

Prueba con....

Código:

#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0;
   left:50%;
   margin-left:-512px;
}

ArturoGallegos · #8 (**permalink**) 30/08/2010, 11:51

agrega un par de propiedades a tus estilos

Código CSS:

Ver original#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0px;
   left:50&#37;;
   margin-left:-512px;
}

oops!!! me gano alexk

TheDark03 · #9 (**permalink**) 30/08/2010, 12:01

No sé a que va orientado el trabajo que deseas realizar, pero tal vez te ayude en algo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style>
*{
margin:0 auto;
padding:0 auto;
}
 
#contenedorCuerpo{
   width:1024px;
   height:624px;
   position:absolute;
   bottom:0;
   right:10%;
   left:10%;
   border:1px solid #FF0000;
}
</style>
</head>
 
<body>
<div id="contenedorCuerpo">
 
</div>
</body>
</html>

Claro que como tu contenedor tiene la propiedad absolute sabrás que pasara después.

Saludos DTB

FantasmaFito · #10 (**permalink**) 30/08/2010, 12:03

Cita:

Iniciado por alexk

Prueba con....

Código:

#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0;
   left:50%;
   margin-left:-512px;
}

Hola, muchas gracias, ha funcionado!!

Ahora, ¿cuál es el truco? Porque básicamente estamos alineando el div 50% a la izquierda y luego corriendolo a la derecha 512 pixeles...

TheDark03 · #11 (**permalink**) 30/08/2010, 12:04

Hola Alexk...

hago la misma pregunta a que se debe?

ArturoGallegos · #12 (**permalink**) 30/08/2010, 12:54

se debe a que 512px representa la mitad del ancho total de tu div

si tu div fuera de 800px de ancho entonces deberías usar margin-left:-400px;

FantasmaFito · #13 (**permalink**) 30/08/2010, 13:15

Cita:

Iniciado por Ag666

se debe a que 512px representa la mitad del ancho total de tu div

si tu div fuera de 800px de ancho entonces deberías usar margin-left:-400px;

Era matematica pura entonces

Gracias a todos por la ayuda!!

alexk · #14 (**permalink**) 30/08/2010, 15:58

Cita:

Iniciado por TheDark03

Hola Alexk...

hago la misma pregunta a que se debe?

como indica Ag666 para centrar un elemento con "position:absolute;" y este quede "fijo" en su sitio (en cualquier resolucion de pantalla), ya que recordemos que al aplicar "position:absolute;" es necesario que el contenedor padre tenga establecido "position:relative;" para controlar la posicion de nuestros elementos (y asi nos ahorramos dicha "ecuacion"), ahora cuando no disponemos de esto, podemos posicionarlo con esas propiedades.