Alignement vertical d'éléments block par display:inline-block;
CSS2.1 a apporté une nouvelle valeur à display : inline-block. Cette propriété permet à l'élément auquel elle est associée de se comporter extérieurement
comme un élément inline tout en conservant certaines caractéristiques d'un block (un élément inline-block ne crée pas de retour à la ligne et supporte
la propriété width.)
L'alignement se fait par rapport au contenu le plus fourni autrement dit celui dont la hauteur dépasse les objets inline-block adjacents
L'avantage est que la propriété vertical-align n'agit plus sur le contenu de la boîte — comme c'est le cas pour les cellules d'une table — mais sur la boîte elle-même
La propriété css inline-block ne fonctionnant pas convenablement avec tous les navigateurs il était difficile de l’utiliser. Ce temps est maintenant révolu
grâce au hack de Ryan Doherty
Pour FF2
La valeur -moz-inline-stack, pour la propriété CSS display, est propre au moteur de rendu Gecko (firefox, netscape)
L'utilisation de '-moz-inline-box' pour remplacer 'inline-block' dans Firefox 2 est déconseillée, il vaudra mieux - en attendant que Firefox 2 soit
remplacer par Firefox 3 - utiliser '-moz-inline-stack' dont les bugs sont plus simples à contrer (exemple de bugs : lorsque le bloc en -moz-inline-stack a plusieurs enfants,
le bug de superposition se produit d'où l'utilisation d'un div tampon.)
Pour appliquer cette règle alternative, il suffit simplement de la mettre en amont.
FF2 lira le premier display, ne comprendra pas le deuxième display et donc enregistrera "moz-inline-stack". Les autres feront l'inverse mis à part FF3
qui écrasera -moz-inline-stack par inline-block.
Pour IE inférieur à IE8
La règle display:inline-block attribue le layout dans IE (pour en savoir plus sur le layout lire ce document)
mais inline-block ne confère que le layout et ne donne pas le comportment en ligne aux élèments de type block.
Sur un élément de type block , elle n'aura donc que cet effet , cet élément conservera ces caractéristiques
Pour obtenir l'effet recherché , il faudra passer cet élément de type block en type inline au préalable puis lui attribuer le layout avec zoom:1.
Il faut donc surcharger la definition css. Pour cela il suffit de mettre le signe / devant le style css et il ne sera compris que par IE6 et IE7.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisl metus, vehicula id, tincidunt at, aliquet et, sem. Duis pretium justo. Aenean tortor lectus, laoreet et, fermentum quis, volutpat nec, tortor. Integer et velit in mi viverra sagittis. Cras vitae massa.
Le code xhtml :
<div class="inblimg1">
<div class="tampon">
<p >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec nisl metus, vehicula id, tincidunt at, aliquet et,
sem. Duis pretium justo. Aenean tortor lectus, laoreet et,
fermentum quis, volutpat nec, tortor. Integer et velit
in mi viverra sagittis. Cras vitae massa.
</p>
</div>
</div>
<div class="inblimg2">
<div class="tampon">
<img src="soleil.jpg" alt="test image mabweb09" width: 150px height: 150px >
</div>
</div>
Le code css :
/* pour aligner le texte verticalement */
div.inblimg1, div.inblimg2 {
display:-moz-inline-stack;
display:inline-block;
vertical-align:middle;
/display:inline;
/zoom:1;
}
div.inblimg1 {
width:70%;
margin-left : 30px;
}
div.inblimg2 {
width:20%;
}
div.tampon {display:block;} /* pour ff2 */
