Centrar verticalmente múltiples div en su div principal

Tengo un conjunto de elementos dentro de un elemento primario. La altura del elemento principal puede cambiar (algunos archivos jQuery lo cambiarán). Aquí es cómo el diseño se ve:Centrar verticalmente múltiples div en su div principal

<div class = "parent"> 
    <div class="child1"> 
    </div> 
    <div class="child2"> 
    </div> 
</div>

Quiero que los elementos secundarios que terminan alineados en el centro de la div padre, pero no puedo encontrar la manera de escribir el css para hacerlo. He intentado escribir cosas como:

.child1 { 
     ... 
     vertical-align: middle; 
}

Lo que no funciona. También lo intenté:

.parent { 
     display:table; 
} 
.child1 { 
     display:table-cell; 
     vertical-align:middle; 
}

Esto tampoco funciona. ¿Alguna idea de como hacer esto?

Fuente

2012-03-08 jay

Comprobar este enlace: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

esto traerá la parte superior de su hijo div a 50% del depósito. solo agrega margin-top: - (x) px; donde (x) es la mitad de la altura de su hijo.

Fuente

2012-03-08 19:07:04

gracias por sus comentarios, sin embargo, esto se alinea el borde superior de la div a la marca del 50%, no al medio de la div. ¿Hay alguna forma de arreglar eso? – jay

Encontré una solución, simplemente hago margin-top: -10px; o ajuste eso en consecuencia para que sea la mitad de la altura del div infantil. ¿Quieres agregar este bit en tu respuesta? Estaré encantado de marcar esto como la respuesta si es así. – jay

Esto es un poco más complicado que su estándar "cómo alinear verticalmente un solo div dentro de un contenedor primario".

Si tiene un número múltiple (que puede cambiar) de elementos secundarios que necesitan alinearse verticalmente o si cambia la altura de su contenedor primario, necesitará usar Javsacript/JQuery para establecer la posición ya que no hay " estándar "forma de aplicar una alineación vertical media a múltiples elementos secundarios dentro de un contenedor principal utilizando solo CSS. EDITAR: Se ha demostrado que estoy equivocado, aparentemente puede usar: antes de pseudo-elemento, pero no funcionará en IE7 a menos que lo piratee.

He implementado esto en un violín: http://jsfiddle.net/rJJah/20/

piezas clave

Cada elemento tiene un niño position:relative. Esto es importante porque ciertos elementos secundarios pueden tener una altura variable, y esto elimina la necesidad de calcular la posición superior por separado para cada uno.
Cada vez que cambie la altura del contenedor primario, tendrá que volver a ejecutar los cálculos de altura y establecer el desplazamiento superior para cada elemento secundario.

Fuente

2012-03-08 19:32:11 t0nyh0

esto podría funcionar, pero la otra solución es CSS puro que prefiero. ¡Gracias! – jay

Entiendo. Sin embargo, tenga en cuenta que la otra solución no funciona correctamente en IE7 ya que IE7 no reconoce el: antes del pseudo-elemento. – t0nyh0

Puede crear un contenedor para los elementos que desea centrar el interior de un recipiente que consigue centrado en lugar de este modo:

HTML

<div class ="parent"> 
    <div class="centerme"> 
     <div class="child1"> 
      .... 
     </div> 
     <div class="child2"> 
      .... 
     </div> 
     </div> 
</div>

entonces usted puede simplemente hacer esto:

CSS

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
}

Demo. Método encontrado en CSS-tricks.

Fuente

2012-03-08 19:33:21

Se ha olvidado de aplicar el mismo estilo en child2 como en child1, así:

.child1, .child2 { 
    display:table-cell; 
    vertical-align:middle; 
}

Aquí es una jsFiddle: http://jsfiddle.net/D853q/1/

Fuente

2012-03-08 19:42:55

Centrar verticalmente múltiples div en su div principal

Respuesta

Cuestiones relacionadas