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%;
} 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)
Application des vertical-align
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.
Problèmes des vertical-align
La propriété de feuille de style css vertical-align est interprété différemment suivant le navigateur.
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 :
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>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;
}Exemple de code :
<div id="parent"><div id="fils2"><div id="fils3">Vertical</div></div></div>