CSS - alignement vertical

La description

La propriété vertical-align détermine l'alignement du texte dans une ligne ou dans une cellule de tableau.

Valeurs possibles

  • baseline - La ligne de base de l'élément est alignée sur la ligne de base de l'élément parent.

  • sub - La ligne de base de l'élément est abaissée au point approprié pour le texte en indice.

  • super - La ligne de base de l'élément est élevée au point approprié pour le texte en exposant.

  • top - Le haut de la boîte de l'élément est aligné avec le haut de la boîte de ligne, dans le contexte du contenu en ligne, ou avec le haut de la cellule du tableau dans le contexte des tableaux.

  • text-top - Le haut de la boîte de l'élément est aligné avec le haut de la boîte en ligne la plus élevée de la ligne.

  • middle - La ligne de base de l'élément est alignée avec le point défini par la ligne de base de l'élément parent plus la moitié de la hauteur x de la police de l'élément parent, dans le contexte du contenu en ligne.

  • bottom - Le bas de la boîte de l'élément est aligné avec le bas de la boîte de ligne, dans le contexte du contenu en ligne, ou avec le bas de la cellule du tableau dans le contexte des tableaux.

  • text-bottom - Le bas de la boîte de l'élément est aligné avec le bas de la boîte en ligne la plus basse de la ligne.

  • percentage - La ligne de base de l'élément est augmentée ou abaissée du pourcentage donné de la valeur de la hauteur de ligne de propriété.

  • length- La ligne de base de l'élément est augmentée ou abaissée de la valeur de longueur donnée. Les valeurs de longueur négatives sont autorisées pour cette propriété. Une valeur de longueur de 0 pour cette propriété a le même effet que la valeur de référence.

S'applique à

éléments de niveau en ligne et éléments avec un affichage de table-cellule.

Syntaxe DOM

object.style.verticalAlign = "baseline";

Exemple

Voici l'exemple -

<html>
   <head>
   </head>

   <body>
      <table style = "height:200px; width:400px;border:1px solid red;">
         <tr>
            <td style = "vertical-align:bottom;" >
               <p>This will be aligned to bottom of the cell.</p>
            </td>
         </tr>
      </table>
   </body>
</html>

Cela produira le résultat suivant -