Verticalement centrage plusieurs div est dans la div parent

J'ai un ensemble d'éléments à l'intérieur d'un élément parent. Le parent de l'élément en hauteur peut changer (il sera modifié par certains fichiers jQuery). Voici l'apparence de la disposition:

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

Je veux les éléments d'enfant pour la fin de alignées au milieu de la div parent, mais je ne peux pas comprendre comment écrire le code css pour le faire. J'ai essayé d'écrire des choses comme:

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

Qui ne fonctionne pas. J'ai aussi essayé:

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

Cela ne fonctionnera pas non plus. Aucune idées de comment faire cela?

OriginalL'auteur jay | 2012-03-08

  1. 4

    Vérifier ce lien : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    cela apportera à votre enfant div supérieur à 50% du récipient. ajoutez juste margin-top: -(x)px; où (x) est la moitié de votre enfant div hauteur.

    merci pour vos commentaires, cependant cela permet d'aligner le bord supérieur de la div à 50%, pas au milieu de la div. Est-il un moyen de corriger ça?
    J'ai trouvé une solution, je viens de faire margin-top:-10px; ou ajuster que, par conséquent, à la moitié de la hauteur de l'enfant div. Souhaitez ajouter ce bit dans votre réponse? Je serai heureux de marquer ce que la réponse si.

    OriginalL'auteur Arsh Singh

  2. 11

    Vous pouvez créer un wrapper pour les éléments que vous souhaitez center à l'intérieur d'un conteneur qui obtient centrée au lieu de la sorte:

    HTML

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

    Ensuite, vous pouvez simplement faire ceci:

    CSS

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

    Démo. Méthode trouvée sur au CSS-tricks.

    OriginalL'auteur Andres Ilich

  3. 1

    C'est un peu plus compliqué que votre standard "comment puis-je verticalement aligner un seul div à l'intérieur d'un conteneur parent."

    Si vous avez un nombre multiple (qui peut changer) de l'enfant-éléments qui doivent être alignés verticalement ou si votre conteneur parent de la hauteur, alors vous aurez besoin d'utiliser Javsacript/JQuery permettant de définir la position comme il n'y a pas de façon "standard" pour appliquer un moyen d'alignement vertical à plusieurs éléments enfants à l'intérieur d'un conteneur parent en utilisant juste le CSS.
    EDIT: j'ai eu tort, vous pouvez apparemment avec l'aide de :avant de pseudo-élément, mais il ne fonctionne pas dans IE7, à moins que vous hack autour d'elle.

    J'ai mis en place ce dans un violon: http://jsfiddle.net/rJJah/20/

    Éléments clés

    1. Chaque élément Enfant a un position:relative. Ceci est important parce que certains éléments enfants peuvent avoir de la hauteur variable, et ceci élimine le besoin pour calculer la position supérieure séparément pour chaque.
    2. Chaque fois que vous modifiez la hauteur du conteneur parent, vous devrez relancer la hauteur de calculs et de réglage du haut de décalage pour chaque enfant.
    cela pourrait fonctionner, mais l'autre solution est de la pure CSS que je préfère. Merci bien!
    Je comprends. Sachez cependant que l'autre solution ne fonctionne pas correctement dans IE7 que IE7 ne reconnaît pas l' :avant de pseudo-élément.

    OriginalL'auteur t0nyh0

  4. 0

    Vous avez oublié d'appliquer le même style sur enfant2 que sur enfant1, comme suit:

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

    Ici est un jsfiddle: http://jsfiddle.net/D853q/1/

    OriginalL'auteur Robert Kajic