Foros del Web » Creando para Internet » CSS »

Alineamiento Vertical

Estas en el tema de Alineamiento Vertical en el foro de CSS en Foros del Web. Hola a todos! Quisiera saber cómo puedo alinear un elemento verticalmente en un div? Gracias!...
  #1 (permalink)  
Antiguo 07/10/2008, 00:34
 
Fecha de Ingreso: abril-2008
Mensajes: 201
Antigüedad: 16 años, 7 meses
Puntos: 0
Alineamiento Vertical

Hola a todos!
Quisiera saber cómo puedo alinear un elemento verticalmente en un div?
Gracias!
  #2 (permalink)  
Antiguo 07/10/2008, 02:26
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.511
Antigüedad: 16 años, 2 meses
Puntos: 188
Respuesta: Alineamiento Vertical

estrictamente =>
.elementoalineadoverticalmente
{
vertical-align:middle; //o bottom, o top, o los valores que permita
}

No tan estrictamente

.elementoalineadoverticalmente
{
margin-top:nºpx; // donde nº es el número de pixels que quieres tener de separación vertical
// tb. vale margin-bottom; padding-bottom o padding-top.
}
  #3 (permalink)  
Antiguo 07/10/2008, 04:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: Alineamiento Vertical

Mira a ver si alguno de estos ejemplos te sirve:

http://www.araudi.net/ejemplos/centrado_vertical.html
http://www.araudi.net/ejemplos/centrado_vertical3.html
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 15/10/2008, 17:59
 
Fecha de Ingreso: abril-2008
Mensajes: 201
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Alineamiento Vertical

Hola, gracias a ambos por las respuestas.

Mikmoro: He probado tus ejemplos, el primero se ve bien i.e. y Firefox, pero no en Safari, entonces probé el número 3 y ok!. Tengo una duda, lo he querido centrar y hacer más grande la caja. Simplemente centré el body, he cambiado las dimenciones de la caja y le agregué margen auto, pero en el i.e., se ve el contenido fuera de la caja.

¿Cómo se puede solucionarlo??
Gracias!
  #5 (permalink)  
Antiguo 15/10/2008, 18:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: Alineamiento Vertical

Pues no puedo estar seguro de lo que has hecho, pero con este simple cambio puedes agrandar la caja y centrarla en la pantalla, tanto en FF como en IE:

#caja {display: table;
height: 500px;
width: 500px;
border: 1px solid #f00;
position: relative;
margin: 0 auto;
}
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 16/10/2008, 06:08
 
Fecha de Ingreso: abril-2008
Mensajes: 201
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Alineamiento Vertical

Gracias Mikel!

La caja quedó centrada y su texto dentro, centrado verticalmente.
Sólo me faltaría saber una cosa , cómo hacer para que la caja quede también centrada verticalmente respecto al body...
Gracias!!
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 04:00.