Table d'alignement Vertical-cellule 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é dans le milieu de ma "cellule de tableau". Tout fonctionne comme prévu jusqu'à ce que j'ajoute "position: absolute". Maintenant il ne peut plus placer mon contenu au milieu? Pourquoi pas? Il connaît toujours ma taille et ma largeur parce que je l'ai mis dans mon CSS.

toute solution intelligente pour contourner cette?

25
demandé sur Brian Tompsett - 汤莱恩 2012-01-17 19:09:13
la source

3 ответов

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

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

en ce qui concerne une solution de contournement, je pense que vous devrez l'envelopper 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
répondu thirtydot 2012-01-17 19:25:58
la source

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

#position: absolute;

ce hack a été trouvé ici: centrage Vertical dans CSS

3
répondu Matt K 2012-01-17 19:24:09
la source

voici la solution:

<div style="position: absolute; /*your position*/">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>
3
répondu FlashTrava 2012-01-17 19:32:10
la source

Autres questions sur