Alignement vertical d'éléments block par tableaux
A ce jour il n'y a pas de solutions simples pour aligner les éléments block verticalement. Une des solutions est donc d'utiliser les tableaux. Mais...
1) Les tableaux c'est pas beau
(Qui c'est qu'a dit ça ?
C'est pas moi !
)
2) C'est lourd à charger et pas facile à mettre à jour
3) Il est aussi interressant d'approfondir le CSS pour voir comment arriver quand même à un alignement vertical.
4) Un jour il existera une solution simple en CSS 
On utilisera, pour commencer, l'élément HTML table
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. |
|
Le code xhtml :
<table ><tr>
<td class="page-td">
<p class="tdroit">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit.
Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa,
varius a, semper congue, euismod non, mi.
</p>
</td>
<td class="page-td">
<img src="soleil.jpg" alt="test image mabweb09" width: 150px height: 150px >
</td>
</tr></table>
Le code css :
/* pour aligner le texte verticalement */
.page-td {
height: 100%;
padding: 0;
vertical-align: middle;
}
Mais on peut aussi faire des tableaux sans tableaux 
En effet, il est possible de simuler le rendu visuel d'un tableau à l'aide de CSS. Il faut pour cela utiliser la propriété display
Cette propriété peut prendre une foule de valeurs mais dans le cas présent nous nous contenterons d'utiliser table et table-cell.
Malheureusement, cette méthode n'est pas interprêtée par Internet Explorer 7 et précédent.
Il faut donc utiliser avec IE une autre méthode qui ne marche bien sûr pas avec Firefox
display:inline permet de modifier le type de comportement des balises de type "block" en type inline
(2 contenus ou balises de type inline se suivant peuvent être aligner verticalement)
zoom:1 permet d'attribuer le Layout aux éléments
Le Layout est une spécificité du navigateur Internet Explorer, qui affecte les versions 5 à 7 incluses.
Il s'agit d'une sur-couche du moteur de rendu d'Internet Explorer. Le Layout intervient dans le positionnement des
éléments et plus généralement dans le calcul de l'affichage des pages web.
Pour en savoir plus lire ce document
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. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Le code xhtml :
<div class="table" >
<div class="td">
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit.
Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa,
varius a, semper congue, euismod non, mi.
</p>
</div>
<div class="td">
<img src="soleil.jpg" alt="test image mabweb09" width: 150px height: 150px >
</div>
</div>
Le code css :
/* pour aligner le texte verticalement */
div.table {
display:table;
/display:inline;
/zoom : 1;
}
div.td {
display:table-cell;
padding : 10px;
vertical-align: middle;
/display:inline;
/zoom : 1;
/width:70%;
}
