Accueil    CSS    Propriété Vertical-align
 



style css vertical-align  Style CSS vertical-align

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété vertical-align permet de définir l'alignement vertical d'un élément. Elle n'est cependant valable que pour certains contextes, spécifiquement les cellules des tableaux et les éléments de type inline comme les images.
Attention, cette propriété ne définit pas l'alignement vertical d'un texte au sein d'un élément.

La problématique d'alignement verticale du texte est classique et deux solutions simples peuvent être appliquées :
    - Utilisation de la propriété line-height
   Pour aligner du texte dans une div de hauteur fixe, on assigne la propriété line-height valorisée à la hauteur (on ne peut écrire qu'une seule ligne, sans retour à la ligne) :



<div style="width:350px; height:50px; line-height:50px; border:solid 1px black;">
   Exemple de texte centré dans une div
</div>

Exemple de texte centré dans une div


    - Utilisation de l'affichage display:table et display:table-cell :
   En définissant deux éléments div imbriqués, on peut utiliser le type d'affichage table et table-cell pour appliquer ensuite la propriété vertical-align :



<div style="display:table; height:180px; overflow: hidden; width: 200px; background-color: #EBEBEB; border:solid 1px black;">
   <div style="display:table-cell; vertical-align:middle; width:100%; margin:0 auto; text-align:center;">
      Exemple de texte centré <br /> sur plusieurs lignes
   </div>
</div>

Exemple de texte centré
sur plusieurs lignes






Propriétés pour le style vertical-align :




Propriété Définition Valeurs CSS
vertical-align Détermine l'alignement vertical d'un élément valeur
%
baseline
bottom
middle
sub
super
text-bottom
text-top
top
inherit
CSS 1


Exemple d'utilisation du style css vertical-align :




Mise en place de l'alignement vertical dans un tableau html :

<table rules="all" cellpadding="2px" style="border:solid 1px black; border-collapse:collapse;">
   <tr style="height:35px; vertical-align:top;">
      <td>cellule alignée verticalement en haut</td>
      <td>cellule alignée verticalement en haut</td>
   </tr>
   <tr style="height:35px; vertical-align:middle;">
      <td>cellule centrée verticalement</td>
      <td>cellule centrée verticalement</td>
   </tr>
   <tr style="height:35px; vertical-align:bottom;">
      <td>cellule alignée verticalement en bas</td>
      <td>cellule alignée verticalement en bas</td>
   </tr>
</table>



Mise en place de l'alignement vertical des images par rapport au texte :

<p style="border:1px dashed black; width:500px;">
   Texte avant l'image
   <img src="arobas.png" alt="exemple" style="vertical-align:top;">
   Texte après l'image, vertical-align:top
</p>

<p style="border:1px dashed black; width:500px;">
   Texte avant l'image
   <img src="arobas.png" alt="exemple" style="vertical-align:middle;">
   Texte après l'image, vertical-align:middle
</p>

<p style="border:1px dashed black; width:500px;">
   Texte avant l'image
   <img src="arobas.png" alt="exemple" style="vertical-align:bottom;">
   Texte après l'image, vertical-align:bottom
</p>


- Mise en place de l'alignement vertical dans un tableau html :

cellule alignée verticalement en haut cellule alignée verticalement en haut
cellule centrée verticalement cellule centrée verticalement
cellule alignée verticalement en bas cellule alignée verticalement en bas



- Mise en place de l'alignement vertical des images par rapport au texte :

Texte avant l'image exemple Texte après l'image, vertical-align:top

Texte avant l'image exemple Texte après l'image, vertical-align:middle

Texte avant l'image exemple Texte après l'image, vertical-align:bottom