trois divs positionnement à l'intérieur cellule de table

Question

S'il vous plaît aidez-moi à aligner trois divs cellules de table à l'intérieur comme suit:

Deux petits divs absolument positionnés en haut coins gauche à droite et en bas de la cellule du tableau. Une div doit être centrée verticalement et horizontalement à l'intérieur de la cellule de table. En fonction de la hauteur de la cellule, les petits divs devraient pouvoir chevaucher les div divisés.

J'ai été réussi à aligner div central. Mais je ne sais pas comment implémenter les petits divs.

<div style=" #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; text-align: center; width:inherit; height:inherit;"> 
     <div style=" #position: relative; #top: -50%; margin-left: auto; margin-right: auto; background-color: green "> 
     first line<br> 
     second line 
    </div> 
</div> 

Voici ce que j'ai pour le moment: http://jsfiddle.net/zm2WW/5/

Merci

Answer 1

Je nettoyé votre code un peu. Voir http://jsfiddle.net/zm2WW/12/ pour une démo.

Voici ce que la cellule de table du milieu ressemble maintenant:

<table> 
    <tr> 
     <td> 
     </td> 
     <td> 
      <div class="containingBlock"> 
       <span class="topSpan">TopSpan</span> 
       <div class="centerCell">text</div> 
       <span class="bottomSpan">2</span> 
      </div> 
     </td> 
     <td></td> 
    </tr> 
</table>​ 

Et votre CSS:

td { 
    border: 1px solid; 
    width: 200px; 
    height: 75px; 
} 

div, span { 
    border: 1px solid black; 
} 

.containingBlock { 
    display: table; 
    height: 100%; 
    position: relative; 
    vertical-align: middle; 
    width: 100%; 
} 

.centerCell { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
} 

.topSpan { 
    position: absolute; 
    top: 0; 
} 

.bottomSpan { 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    right: 0 
}​ 

Qu'est-ce qui se passe ici est que vous avez un bloc contenant par rapport, qui fournit une toile de fond pour les travées absolument-positionnées. La div occupe toute la cellule, mais son contenu est centré pour vous donner le même effet.