Foros del Web » Creando para Internet » CSS »

"display:table-cell" y "vertical-align:middle" no funcionan con "float;left"

Estas en el tema de "display:table-cell" y "vertical-align:middle" no funcionan con "float;left" en el foro de CSS en Foros del Web. Pues eso. Tengo un div cuadrado, y dentro de ese otro div rectangular con el mismo ancho del anterior y la mitad de altura. Quiero ...
  #1 (permalink)  
Antiguo 04/08/2013, 13:13
Avatar de saulortega  
Fecha de Ingreso: septiembre-2011
Ubicación: Bogotá
Mensajes: 79
Antigüedad: 12 años, 6 meses
Puntos: 0
"display:table-cell" y "vertical-align:middle" no funcionan con "float;left"

Pues eso.

Tengo un div cuadrado, y dentro de ese otro div rectangular con el mismo ancho del anterior y la mitad de altura. Quiero que ese rectángulo se centre verticalmente dentro del cuadrado, lo cual me funciona con "display:table-cell" y "vertical-align:middle" siempre y cuando no use "float". En cuanto uso float en el div cuadrado, deja de centrarse el div rectangular...

¿Cómo lo puedo solucionar?
  #2 (permalink)  
Antiguo 04/08/2013, 13:23
Avatar de saulortega  
Fecha de Ingreso: septiembre-2011
Ubicación: Bogotá
Mensajes: 79
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: "display:table-cell" y "vertical-align:middle" no funcionan con "float;le

Y tampoco funciona margin...
  #3 (permalink)  
Antiguo 04/08/2013, 14:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: "display:table-cell" y "vertical-align:middle" no funcionan con "float;le

No puedes flotar un elemento y especificar un display: table-cell. Bueno, si puedes, pero automáticamente se convertirá en un elemento de bloque (display: block).

En realidad tampoco tiene mucho sentido flotar un elemento que actúa como una celda.

Para centrar verticalmente hay varios métodos. Pero se usa uno u otro en función del escenario. Del que en tu caso no sabemos mucho.
  #4 (permalink)  
Antiguo 05/08/2013, 09:18
Avatar de saulortega  
Fecha de Ingreso: septiembre-2011
Ubicación: Bogotá
Mensajes: 79
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: "display:table-cell" y "vertical-align:middle" no funcionan con "float;le

Si floto también el div rectangular, se arregla. Pero deja de centrarse un texto que hay dentro del rectángulo...

Y si floto ese texto se descuadra peor...

En fin, dejé un margen superior en el texto para que quede "centrado", que no es lo ideal, pero bueno, así lo dejo...
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 02:44.