centre Html/Css un div dans un div verticalement

Question

Bonjour tout est là ma question:

J'ai un site html/css et j'ai plusieurs de parents et enfants div. Je dois faire un script (Jquery?) Qui trouve le parent et l'enfant de la hauteur div et ajouter le nécessaire pour centrer css l'enfant dans le parent ...

<div class="parent"> 
<div class="child"> 
</div> 
</div> 
..... 
<div class="parent"> 
<div class="child"> 
</div> 
</div> 
.... 
<div class="parent"> 
<div class="child"> 
</div> 
</div> 

<SCRIPT> 
??? 
</SCRIPT> 

Merci à tous ...

Answer 1

Vous pouvez essayer ce code jQuery:

$(document).ready(function() { 
    var childHeight = $('.child').css('margin-top', function() { 
    var childHeight = $(this).height(); 
    var parentHeight = $(this).parent().height(); 
    return ((parentHeight - childHeight)/2); 
    }); 
}); 

En fait, après que le document a été chargé,
vous extrayez des hauteurs de tous les éléments DOM avec classe enfant et pères relatifs,
vous aurez besoin pour calculer la valeur marge supérieure de l'enfant obj.

Answer 2

si je compris ui pense u peut le faire avec ce peu de css:

.parent { 
    height: auto; 
    overflow: hidden; /* This actually makes height auto */ 
    padding: 10px 0; /* exmaple of 10px up and down that will actully center it with some space IF space is needed*/ 
} 

Answer 3

Pas besoin d'utiliser jQuery ici, vous pouvez utiliser overflow:auto combinaison avec margin comme indiqué dans le lien ci-dessous.

Working Fiddle

.parent{overflow:auto;width:100px;height:100px;background-color:green;margin-bottom:10px;} 
.child{width:50px;height:50px;background-color:blue;margin:25px;} 

Vous pouvez également remplacer des pixels avec des pourcentages ici. Cela peut également être effectué en utilisant les propriétés float ou display au lieu de overflow:auto.

Answer 4

Une autre façon de procéder consiste à définir la propriété display du div parent sur table-cell. Voici le code:

<div style="display:table-cell; height:200px; border:1px solid red; vertical-align:middle; align: center;"> 
    <div style="height:100px; border:1px solid blue;">The content</div> 
</div> 

Et voici à quoi il ressemble:

http://screencast.com/t/6kB9ec1uV

Vous n'avez pas besoin d'un script, sauf si vous voulez faire quelque chose d'autre que le centrage de la div enfant. Passez une bonne journée !

Answer 5

avec jQuery:

LIVE DEMO

$('.parent').each(function(){ 

    var $pa = $(this); 
    var $ch = $pa.find('.child'); 
    var paH = $pa.innerHeight(); 
    var chH = $ch.innerHeight(); 

    $ch.css({marginTop: (paH-chH)/2}); 

}); 

Si vous avez des images dans votre .child Je vous suggère de assing à ce que les images d'une propriété height="", ou de mettre à l'intérieur du JS une fonction et le rappeler sur $(window).load(function(){ /*here*/ });