web-dev-qa-db-fra.com

L'alignement vertical des cellules du tableau ne fonctionne pas avec la position absolue

http://jsfiddle.net/fQv97/

[~ # ~] html [~ # ~] 

<div class="table-cell">
    My text, should be align middle
</div>

[~ # ~] css [~ # ~] 

.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
    position: absolute;
}

Problème

Le texte doit être placé au milieu de ma "cellule de tableau". Tout fonctionne comme prévu jusqu'à ce que j'ajoute "position: absolue". Maintenant, il ne peut plus placer mon contenu au milieu? Pourquoi pas? Il connaît toujours ma hauteur et ma largeur parce que je l'ai défini dans mon CSS.

Une solution de contournement intelligente pour cela?

cssvertical-alignmentcss-tables
25
Jens Törnell

Tout fonctionne comme prévu jusqu'à ce que j'ajoute "position: absolue". Maintenant, il ne peut plus placer mon contenu au milieu? Pourquoi pas?

position: absolute les forces display: block, lire le numéro deux ici .

Quant à une solution de contournement, je pense que vous devrez l'encapsuler dans un autre élément:

<div class="table-cell-wrapper">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

.table-cell-wrapper {
    position: absolute;
}
.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
}
40
thirtydot

Il y a quelques solutions de contournement que j'ai découvertes pour cela, comme l'ajout d'un hachage avant la position:

#position: absolute;

Ce hack a été trouvé ici: Centrage vertical en CSS

3
Matt K

voici la solution:

<div style="position: absolute; /*your position*/">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>
3
FlashTrava