Exemple de code de la propriété JS / CSS verticalAlign.

<style>
.cadre-gris{ margin : 5px 0}
#exemple-style-0{color:red}
#exemple-style-2{line-height:6em}
</style>
<div class="cadre-exemple" id="exemple">
  <h3 id="exemple-desc">Valeur par défaut</h3>
  <div class="cadre-gris">
  <span id="exemple-desc-0">Valeur par défaut</span>
  <div class="cadre-vert" >Sed ut tum ad senem <sup id="exemple-style-0">senex</sup> de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis.</div>
  </div>
  <div class="cadre-gris">
  <span id="exemple-desc-1">Valeur par défaut</span>
  <div class="cadre-vert" >Sed ut tum ad senem <img id="exemple-style-1" src="../images/javascript/carreo.gif" border="1" >  de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis. 
   </div>
  </div>
  <div class="cadre-gris">
   <span id="exemple-desc-2">Valeur par défaut</span>
  <div class="cadre-vert" id="exemple-style-2">Effet verticalAlign</div>
  </div>
<div class="cadre-gris">
<table border="1">
  <tr>
    <td id="exemple-desc-3">Valeur par défaut</td>
    <td id="exemple-style-3">Effet verticalAlign</td> 
  </tr>
</table>
</div>
</div>
<script>
initExemple('vertical-align',  'verticalAlign', ['50%', 'baseline', 'sub', '-6em', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom', 'inherit'], 4); 
</script>