CSS vertical-align - Exemple de code propriété vertical-align CSS | Zone CSS - les css et leurs relations avec les balises HTML et XHTML (feuille de style css 07/03/12)

Exemple de code détaillé de la propriété css vertical-align.

.identifiant{vertical-align:sub}
<div>Mot<span style="vertical-align:sub; ">indice</span></div>
.identifiant{vertical-align:super}
<div>Mot<span style="vertical-align:super">exposant</span></div>
td{vertical-align:top}<br>
td{vertical-align:middle}<br>
td{vertical-align:bottom}
<table border="1">
<tr>
<td>Exemple de <br>
vertical-align<br>
dans un tableau</td>
<td style="vertical-align:top; ">vertical-align:top; </td>
<td style="vertical-align:middle; ">vertical-align:middle; </td>
<td style="vertical-align:bottom; ">vertical-align:bottom; </td>
</tr>
</table>
img{ vertical-align : baseline; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:baseline"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : text-top; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:text-top"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : text-bottom; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:text-bottom; "><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : middle; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:middle; "><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : top; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:top; "><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : bottom; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:bottom; "><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
img{ vertical-align : 3px; }
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/css/carreo.gif" border="1" style="vertical-align:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>

Interprétation du code détaillé de la propriété css vertical-align par votre navigateur.

.identifiant{vertical-align:sub}

Motindice

.identifiant{vertical-align:super}

Motexposant

td{vertical-align:top}
td{vertical-align:middle}
td{vertical-align:bottom}

Exemple de
vertical-align
dans un tableau

vertical-align:top;

vertical-align:middle;

vertical-align:bottom;

img{ vertical-align : baseline; }

vertical-align vertical-align

img{ vertical-align : text-top; }

vertical-align vertical-align

img{ vertical-align : text-bottom; }

vertical-align vertical-align

img{ vertical-align : middle; }

vertical-align vertical-align

img{ vertical-align : top; }

vertical-align vertical-align

img{ vertical-align : bottom; }

vertical-align vertical-align

img{ vertical-align : 3px; }

vertical-align vertical-align

Interprétation normal du code de la propriété css vertical-align (copie d'écran).

copie d'écran de l'affichage de la propriété css vertical-align