Vertical align table-cell ne pas travailler avec une 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 je ajouter "position: absolute". Maintenant, il ne peux pas mettre mon contenu au moyen de tout plus? Pourquoi pas? Il ne sait toujours ma hauteur et en largeur, car je l'ai mis dans mon CSS.

Tout astucieuse solution pour cela?

InformationsquelleAutor Jens Törnell | 2012-01-17
  1. 40

    Tout fonctionne comme prévu jusqu'à ce que je ajouter "position: absolute". Maintenant, il
    ne peux pas mettre mon contenu au moyen de tout plus? Pourquoi pas?

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

    Comme pour une solution de contournement, je pense que vous aurez 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;
}
    • J'ai dû mettre mon wrapper div en display: table à obtenir que cela fonctionne
    • tks, cela m'aide beaucoup
    InformationsquelleAutor thirtydot
  2. 3

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

    #position: absolute;

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

    InformationsquelleAutor Matt K
  3. 3

    voici la solution:

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