Comment alignez verticalement div à l'intérieur d'une div sans display:table-cell

Ok c'est le div de la structure.

  <div class="DivParent"> 
  <a href="#">

  <div class="DivWhichNeedToBeVerticallyAligned"></div>

  </a>    
  </div>

DivParent a fixé la largeur et la hauteur, mais DivWhichNeedToBeVerticallyAligned n'a pas de hauteur fixe des valeurs.

Si vous faites DivParent display:table-cell; vous pouvez alignez verticalement DivWhichNeedToBeVerticallyAligned mais je ne veux pas utiliser cette fonctionnalité car elle provoque quelques dégâts.

A href de la balise de lien doit être de la même taille avec la divParent je veux dire toute la divparent doit être cliquable. comme display:block.

Donc, y a-CSS façon de aligne verticalement ou léger jquery solution serait aussi de l'aide.

Merci.

Ici jsfiddle : http://jsfiddle.net/XHK2Z/

Quel est le problème avec display:table-cell?

OriginalL'auteur MonsterMMORPG | 2011-09-16

43

Vous pouvez utiliser un assistant pour réaliser l'alignement vertical dans un bloc avec une hauteur fixe.

Regardez ceci: http://jsfiddle.net/kizu/7Fewx/

Là, vous devez avoir une aide de près d'un bloc que vous souhaitez aligner avec:
```
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
```
Et ajouter display: inline-block; vertical-align: middle; à .DivWhichNeedToBeVerticallyAligned

remerciements ce travail est assez bon, mais j'ai mis à jour question pouvez-vous vérifier de nouveau 🙂
j'ai aussi fait jsfiddle : jsfiddle.net/XHK2Z
C'est parce que vous utilisez un supplément non-inline-block élément. Un de la manière de la faire fonctionner: déplacer le lien à wrapper: jsfiddle.net/kizu/XHK2Z/1, et l'autre, c'est passer helper en a: jsfiddle.net/kizu/XHK2Z/2. De toute façon, il est préférable de ne pas utiliser divs à l'intérieur de a, c'est ok en HTML5, mais vous devez toujours être prudent avec cela et éviter lorsque c'est possible
Merci beaucoup pour cette!
Wow qui ont travaillé. Cela avait été de me tuer pendant des semaines sur un projet où j'ai été en utilisant le CSS pour créer des cercles, puis ajuster le texte dans les, où chaque page a un nombre différent de lignes pour le texte, tandis que le cercle a été constante.

OriginalL'auteur kizu
11

Il n'y a aucun moyen de le faire avec du CSS sans connaître la hauteur de l'enfant div.

Avec jQuery, vous pourriez faire quelque chose comme cela.
```
var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
```
J'aime votre approche simple et enveloppé dans une fonction. gist.github.com/dylanvalade/7088132

OriginalL'auteur timrwood
3

si le parent n'ont pas d'autre enfant. ce serait une css "hack"
```
DivParent{line-height:100px /*the div actual height*/ }
.DivWhichNeedToBeVerticallyAligned{display:inline-block}
```
un autre hack est
```
DivParent{height:100px; position:relative}
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;}
```
merci pour la réponse. les deux hack a échoué. deuxième alignés verticalement, mais puisque vous définissez la hauteur ça gâche tout 😀
aligner verticalement est hacky. Vous aurez besoin de JS à la fin. Tout comme Facebook: facebook.com/notes/facebook-engineering/...

OriginalL'auteur Mohsen

Cette solution fonctionne pour moi bien dans les navigateurs modernes, y compris IE 10 et au-dessus.

<div class="parent">
    <div class="child">Content here</div>
</div>

inlucluding cette css

.parent {
  height: 700px;
  display: flex;
  justify-content: center;  
  align-items: center;
}
.child {
  width : 525px;
}

OriginalL'auteur hemkaran_raghav

J'ai été en utilisant la solution suivante (pas de positionnement, pas de table-cell/table-row et pas de ligne de hauteur) depuis plus d'un an, il fonctionne avec IE 7 et 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

OriginalL'auteur Arsh

Ici est une autre option pour les navigateurs modernes:

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%);
}

OriginalL'auteur Tom Sarduy

Vous devez vous connecter pour publier un commentaire.