Comment utilisons-nous display: table-cellule?

Question

J'ai une div avec float: right (pas de propriété de position déclarée). Cette div a un certain contenu de texte qui peut être enveloppé parfois. Je veux que le texte soit toujours centré verticalement. Déclaration d'affichage: table-cell et vertical-align: le milieu de cette div ne fonctionne pas du tout. Quelqu'un peut-il me diriger dans la bonne direction à propos de la table-cellule?

J'utilise FF. Est-ce que cela fonctionnera dans IE?

Answer 1

Si vous déclarez display:table-cell, vous devez l'imbriquer dans les éléments avec display:table-row et display:table. Juste comme une vraie table.

Consultez la section Quirks Mode on Tables pour connaître la compatibilité des navigateurs.

Answer 2

Est-ce que cela fonctionnera dans IE?

IE6-7 no. Les valeurs d'affichage table ne sont pas encore utilisables aujourd'hui pour cette raison. Le Pixel Developer a raison sur l'imbrication ... si vous avez un élément display: table-cell en dehors d'un élément table-row le rendu résultant est indéfini et les différents navigateurs se comporteront différemment et de façon aléatoire.

Answer 3

Je ne peux pas vous offrir un moyen de faire fonctionner display: table-cell; comme vous le souhaitez, mais en supposant que votre exigence soit d'avoir le texte verticalement centré dans son conteneur, je vais vous offrir une solution à cela (en gardant à l'esprit que c'est relativement fragile).

En supposant que la majoration suivante:

<div id="pageWrap"> 

    <h1>This is just filler text</h1> 

    <div id="floatedDiv"> 

     <p>This text should be vertically-centred within the parent div, in this case within the '<code>#floatedDiv</code>.'</p> 

    </div> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum metus ultricies lorem adipiscing malesuada. Morbi at nisl dolor. Praesent aliquet convallis ligula, sed auctor mauris lobortis eget. Aliquam venenatis ornare ligula, sit amet pretium erat dapibus eu. Nam rutrum tempor luctus. Sed interdum tempor urna sed bibendum. Donec volutpat pulvinar massa, sit amet laoreet odio ultrices eu. Phasellus in eros et sapien porta venenatis. Vivamus fringilla, lectus in commodo sodales, lorem ligula lobortis felis, et congue justo lectus eu enim. Pellentesque rutrum auctor cursus. Proin vitae blandit purus. Duis et mauris purus. Proin sit amet placerat leo. Phasellus eget eros velit, id luctus augue. Mauris lacus metus, accumsan auctor tempus sed, auctor vitae tellus. Nulla facilisi.</p> 

</div> 

Et le css:

div#floatedDiv {float: right; 
     width: 50%; 
     clear: left; 
     height: 6em; 
     padding: 0.5em; 
     margin: 0 0 0.5em 1em; 
     border: 1px solid #ccc; 
     position: relative; 
     } 

div#floatedDiv p 
     {position: absolute; 
     top: 50%; 
     left: 1em; 
     right: 1em; 
     margin-top: -20%; 
     } 

<!--[if ie]> 
    div#floatedDiv p {margin-top: -10%; } 
<![end if]--> 

Il est fragile, car il ne sera pas l'échelle automatiquement en fonction des dimensions, de sorte ça a l'air un peu imparfait. Notez également que c'est-à-dire (je n'ai que IE 8 à tester) nécessite une marge négative différente.

Démonstration en direct visible à: http://www.davidrhysthomas.co.uk/so/verticalCentre.html.

travaux de démonstration (testé) sur:

Ubuntu 9.10: Firefox 3.6, Chrome 5.0.307.11

de Windows XP: Firefox 3.6, Chrome 4.0.249.89, IE 8