web-dev-qa-db-fra.com

Comment aligner verticalement div dans un autre div sans affichage: table-cell

Ok c'est la structure div.

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

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

  </a>    
  </div>

DivParent a des valeurs de largeur et de hauteur fixes, mais DivWhichNeedToBeVerticallyAligned n'a pas de valeurs de hauteur fixes.

Si vous affichez DivParent: table-cell; vous pouvez aligner verticalement DivWhichNeedToBeVerticallyAligned mais je ne veux pas utiliser cette fonctionnalité car elle cause des dégâts.

Un lien de balise href doit avoir la même taille que le divParent. Cela signifie que tout le divparent doit être cliquable. comme display: block.

Existe-t-il une méthode CSS d’alignement vertical ou une solution JQuery légère aiderait également?.

Je vous remercie.

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

*

jquerycsshtmlcss3vertical-alignment
12
MonsterMMORPG

Vous pouvez utiliser un assistant supplémentaire pour réaliser l'alignement vertical dans un bloc de hauteur fixe.

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

Là vous devez avoir un assistant près d'un bloc avec lequel vous voulez vous aligner:

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

Et ajoutez display: inline-block; vertical-align: middle; à .DivWhichNeedToBeVerticallyAligned

43
kizu

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

Avec jQuery, vous pouvez faire quelque chose comme ça.

var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
11
timrwood

Cette solution fonctionne très bien pour les navigateurs modernes, y compris IE 10 et versions ultérieures.

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

y compris ce css

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

si le parent n'a pas d'autre enfant. ce serait un 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;}
3
Mohsen

J'utilise la solution suivante (sans positionnement, sans cellule-tableau/ligne-tableau et sans hauteur de ligne) depuis plus d'un an, il fonctionne également 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>
0
Arsh

Voici 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%);
}
0
Tom Sarduy