Exemple de code détaillé de la propriété css verticalAlign.

<script type="text/javascript">
function setproperty(Objet,value){
if(Objet.style.verticalAlign==value){
Objet.style.verticalAlign="";
}else{
Objet.style.verticalAlign=value;
}
}
</script>
Cliquez sur le textes en gras ou sur les images<br>
ObjetJavacsript.style.verticalAlign = "sub";
<div>Mot<span style="font-weight:bold; cursor:pointer" onclick="setproperty(this,'sub')">indice</span></div>
ObjetJavacsript.style.verticalAlign = "super";
<div>Mot<span style="font-weight:bold; cursor:pointer" onclick="setproperty(this,'super')">exposant</span></div>
tdObjetJavacsript.style.verticalAlign = "top"; <br>
tdObjetJavacsript.style.verticalAlign = "middle"; <br>
tdObjetJavacsript.style.verticalAlign = "bottom";
<table border="1">
<tr>
<td>Exemple de <br>
vertical-align<br>
dans un tableau</td>
<td style="vertical-align:bottom; font-weight:bold; cursor:pointer" onclick="setproperty(this,'top')">vertical-align:top; </td>
<td style="vertical-align:top; font-weight:bold; cursor:pointer" onclick="setproperty(this,'middle')">vertical-align:middle; </td>
<td style="vertical-align:top; font-weight:bold; cursor:pointer" onclick="setproperty(this,'bottom')">vertical-align:bottom; </td>
</tr>
</table>
imgObjetJavacsript.style.verticalAlign = "baseline";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'baseline')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "text-top";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'text-top')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "text-bottom";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'text-bottom')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "middle";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'middle')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "top";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'top')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "bottom";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'bottom')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>
imgObjetJavacsript.style.verticalAlign = "3px";
<div style="margin:3px; "><span style="border:1px solid blue; ">vertical-align vertical-align</span><img src="../images/javascript/carreo.gif" border="1" onclick="setproperty(this,'3px')"><span style="border:1px solid blue; ">vertical-align vertical-align</span></div>

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

Cliquez sur le textes en gras ou sur les images
ObjetJavacsript.style.verticalAlign = "sub";

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

vertical-align vertical-alignvertical-align vertical-align

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