Foros del Web » Creando para Internet » CSS »

Centrar div alineado al bottom

Estas en el tema de Centrar div alineado al bottom en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/08/2010, 11:14
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Centrar div alineado al bottom

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!
  #2 (permalink)  
Antiguo 30/08/2010, 11:15
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Centrar div alineado al bottom

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

Prueba así
  #3 (permalink)  
Antiguo 30/08/2010, 11:18
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por Gashe Ver Mensaje
#contenedorCuerpo{
width:1024px;
height:624px;
position: absolute;
bottom:0px;
left:auto;
right:auto;
}

Prueba así
Nup, no funciona...
  #4 (permalink)  
Antiguo 30/08/2010, 11:43
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por FantasmaFito Ver Mensaje
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
  #5 (permalink)  
Antiguo 30/08/2010, 11:44
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Centrar div alineado al bottom

Creas un contenedor para #contenedorcuerpo con las siguientes propiedades:

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

Un saludo.
  #6 (permalink)  
Antiguo 30/08/2010, 12:41
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por TheDark03 Ver Mensaje
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.
  #7 (permalink)  
Antiguo 30/08/2010, 12:51
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar div alineado al bottom

Prueba con....
Código:
#contenedorCuerpo{
   width:1024px;
   height:624px;
   position: absolute;
   bottom:0;
   left:50%;
   margin-left:-512px;
}
  #8 (permalink)  
Antiguo 30/08/2010, 12:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Centrar div alineado al bottom

agrega un par de propiedades a tus estilos

Código CSS:
Ver original
  1. #contenedorCuerpo{
  2.    width:1024px;
  3.    height:624px;
  4.    position: absolute;
  5.    bottom:0px;
  6.    left:50%;
  7.    margin-left:-512px;
  8. }


oops!!! me gano alexk

__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 30/08/2010, 13:01
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Centrar div alineado al bottom

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. *{
  6. margin:0 auto;
  7. padding:0 auto;
  8. }
  9.  
  10. #contenedorCuerpo{
  11.    width:1024px;
  12.    height:624px;
  13.    position:absolute;
  14.    bottom:0;
  15.    right:10%;
  16.    left:10%;
  17.    border:1px solid #FF0000;
  18. }
  19. </head>
  20.  
  21. <div id="contenedorCuerpo">
  22.  
  23. </div>
  24. </body>
  25. </html>

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


Saludos DTB
  #10 (permalink)  
Antiguo 30/08/2010, 13:03
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por alexk Ver Mensaje
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...
  #11 (permalink)  
Antiguo 30/08/2010, 13:04
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Centrar div alineado al bottom

Hola Alexk...

hago la misma pregunta a que se debe?
  #12 (permalink)  
Antiguo 30/08/2010, 13:54
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Centrar div alineado al bottom

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;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #13 (permalink)  
Antiguo 30/08/2010, 14:15
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por Ag666 Ver Mensaje
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!!
  #14 (permalink)  
Antiguo 30/08/2010, 16:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar div alineado al bottom

Cita:
Iniciado por TheDark03 Ver Mensaje
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.

Etiquetas: bottom
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 21:14.