Définition de la css vertical-align


Propriété css : vertical-align

Détails des versions feuilles de style css vertical-align
css1
css2
Détails de compatiblilité de la feuilles de style css vertical-align pour les navigateurs
Netscape 4.78
Netscape 6+
Internet Explorer 4+
Mozilla + et Firefox +
Safari 1 +
Chrome +


Définition de vertical-align

La propriété css vertical-align permet de gérer l'alignement vertical du texte.
Exemple de code :
identifiant{
  vertical-align:top;
}
identifiant{
  vertical-align:10%;
}

La propriété vertical-align css peut prendre la valeur de :
- numérique positive ou négative suivie de px ou % ou ex ou em. Le point de départ sera baseline pour les valeurs fixes et pour les pourcentages dépend de line-height.
- baseline, lignes de bases alignées, valeur par défaut.
- sub, ligne de base de l'enfant aligné un peu plus bas que la ligne de base de son parent.
- super, ligne de base de l'enfant aligné un peu plus bas que la partie la plus haute des caractères de son parent.
- text-top, alignement sur les parties les plus hautes.
- text-bottom, alignement sur les parties les plus basses.
- middle, alignement par le milieu vertical.
- top, le haut de l'enfant est aligné sur la partie la plus haute de la ligne.
- bottom, le bas de l'enfant est aligné sur la partie la plus basse de la ligne (sauf ie).
- inherit, hérite de la propriété de son parent (css 2)

La propriété de feuille de style css vertical-align est applicable sur l'ensemble des balises HTML ou XHTML de tableau (tr, td, ...), les champs de formulaires (input, textarea).
L'équivalence de la feuille de style css vertical-align en HTML est :
- l'attribut HTML VALIGN de la balise HTML TD, TR, TH, ...,
- la balise HTML ou XHTML SUP, SUB
- l'attribut HTML ALIGN de la balise HTML IMG.


La propriété de feuille de style css vertical-align est interprété différemment suivant le navigateur.


FAQ

Répond aux questions suivantes :

Comment définir l'alignement vertical d'un texte?
Comment définir l'alignement au milieu d'un texte?
Comment définir l'alignement vertical d'un bloc?
Liste des questions les plus fréquemment posées en css.

Exemples et astuces css

Alignement vertical de block.

Il se peut que vous ayez besoin de centrer verticalement un bloc (fils) dans un bloc div (parent).
Si vous connaissez la hauteur du fils alors pas de problème, vous utiliserez une combinaison de css position, top et margin-top.
Exemple de code :
#parent{
  width:150px;
  height:150px;
  text-align:center;
  vertical-align:middle;
  border:1px solid red;
}
#fils{
  width:50px;
  height:50px;
  border:1px solid red;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  top:50%;
  margin-top:-25px;
}
La valeur négative de margin-top représente la moitié de height
Code HTML :
Exemple de code :
<div id="parent"><div id="fils">Vertical</div></div>

Résultat :
Vertical


Dans le cas où vous ne pouvez pas déterminer la hauteur du fils, je n'ai pas trouvé de solution en css. La seule solution que j'ai trouvé, est de passer par le javascript voici un exemple à tester.
Code Javascript :
Exemple de code :
<script type="text/javascript">
function centreVerticale(){
  var elementCentrageV = new Array("fils2","fils3");
  for(var i=0;i<elementCentrageV.length;i++){
  var parent = document.getElementById(elementCentrageV[i]);
  parent.style.marginTop = "-"+ (parent.clientHeight/2) +"px";
}
}
window.onload = centreVerticale;
</script>
Code Feuille de style css :
Exemple de code :
#parent{
  width:250px;
  height:250px;
  border:1px solid red;
}
#fils2,#fils3{
  width:150px;
  height:150px;
  border:1px solid red;
  margin-left:auto;
  margin-right:auto;
position:relative;
top:50%;
}
#fils3{
  width:50px;
  height:50px;
}

Code HTML :
Exemple de code :
<div id="parent"><div id="fils2"><div id="fils3">Vertical</div></div></div>
Le résultat :
Vertical

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css vertical-align.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.

VOTRE AVIS

Votez pour cette page

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5
Avis sur la page http://www.zonecss.fr/style_css/feuille_css_vertical_align.html Votes: 4.3 / 5 - 54 votes
Cliquez sur une étoile pour voter.



Reporter un bug ou problème d'interprétationavec la propriété vertical-align
La balise HTML et XHTML TR renferme les éléments descriptifs d'une ligne de tableau.<TR> </TR> La balise HTML et XHTML TR contient la balise HTML et ...[Voir]La balise HTML et XHTML TD définit une cellule du tableau. La balise HTML et XHTML TD est contenu dans la balise HTML et XHTML <TR>. Exemple :<TABLE> ...[Voir]La balise HTML et XHTML INPUT va vous permettre de faire : - un champ texte, - un champ caché, - un bouton, - un bouton radio, - une case à cocher. <I...[Voir]La balise HTML et XHTML TEXTAREA définit un champ de texte multiligne où une personne peut taper du texte.<TEXTAREA> </TEXTAREA> La balise HTML et X...[Voir]La balise HTML et XHTML TH définit une cellule titre du tableau, généralement située en dans la première ligne ou colonne du tableau. <TH> </TH> La ba...[Voir]La balise HTML et XHTML SUP, met le texte en exposant.<SUP>mot</SUP> Exemple : texte ...[Voir]La balise HTML et XHTML SUB met le texte en indice.<SUB>mot</SUB> Exemple : texte ...[Voir]La balise HTML et XHTML IMG permet de mettre une image dans le document html. <IMG> Exemple :<img src="../images/balise/rouge.gif" width="50" height=...[Voir]