text-align CSS propriété

text-align : left;
text-align : center;
text-align : right;
text-align : justify;
text-align : ".";

Règles de syntaxes CSS pour text-align.

Règles text-align sur les éléments suivant leur type

La "zone de contenu" est entourée par les padding dits marges intérieures. L'élément de type inline s'aligne horizontalement dans la "zone de contenu" du premier parent trouvé dont le display est block ou inline-block.

L'alignement horizontal sur une élément de type block dans la "zone de contenu" n'a pas d'effet sur son placement. Il restera toujours placé à droite ou à gauche suivant le sens de l'écriture (dir ou direction). Cependant sa "zone de contenu" héritera de la propriété text-align.

Compatibilités navigateurs de la propriété text-align

Equivalence de la CSS text-align en HTML.

L'équivalence de la propriété text-align CSS en HTML est : l'attribut HTML ALIGN des balises HTML.

Flash mx text-align CSS

Pour les utilisateurs de Flash MX, l'équivalence actionscript de la feuille de style css text-align est textAlign.

Exemples et astuces CSS pour utiliser text-align

Alignement horizontal d'un élément de type block

Comme nous l'avons expliqué au dessus, seuls les éléments de type "inline" sont soumis à l'alignement horizontal hérité de leur parent. Donc pour qu'un élément de type "block" accepte l'alignement horizontal spécifié de son parent, il faut le transformer en type "inline-block" grâce à la propriété Css display.

.fils{
  width: 80%;
  border:1px solid green;
}
.parent{
  border:1px solid #000;
  width: 33%;
  text-align:right;
}
.text-align-left{
  text-align:left;
}

<!-- élément de départ -->
<style>
.parent{
  border:1px solid #000;
  width: 33%; 
}
.fils{
  width: 80%;
  border:1px solid green;
}
.text-align-left{
  border:1px solid red;
}
</style>
<div class="parent">
  <span class="text-align-left">texte à gauche</span>
  <div class="fils">Mon bloc est aligné à gauche et son texte si</div>
  <span class="text-align-left">texte à gauche</span>
</div>
<!-- 1ere étape -->
<style>
.parent{
  text-align : right;
  border:1px solid #000; width : 33%; 
}
.fils{
  width : 80%; border : 1px solid green;
}
.text-align-left{
  border : 1px solid red;
}
</style>
<div class="parent">
  <span class="text-align-left">texte à gauche</span>
  <div class="fils">Mon bloc est aligné à droite et son texte aussi</div>
  <span class="text-align-left">texte à gauche</span>
</div>
<!-- 2eme étape  -->
<style>
.parent{
  text-align : right; border:1px solid #000; width : 33%;
}
.fils{
  display : inline-block;
  text-align : left;
  width : 80%; border : 1px solid green;
}
.text-align-lef{
  display : block;
/*
ou
  display : inline-block;
  width : 100%;
*/
  text-align : left;
  border : 1px solid red;
}
</style>
<div class="parent">
  <span class="text-align-left">texte à gauche</span>
  <div class="fils">Mon bloc est aligné à droite et son texte à gauche</div>
  <span class="text-align-left">texte à gauche</span>
</div>

Résultat :

Alignement horizontal de block.

Si vous ayez besoin de centrer horizontalement élément de type block dans une élément de type bloc.
Vus pouvez utiliser une technique qui consiste à spécifier les marges droite et gauche en auto.

#fils{
  width:150px;
  height:150px;
  border:1px solid red;
  margin-right: auto;
  margin-left: auto;
}
#parent{
  border:1px solid green;
  width:350px;
  height:160px;
}

<div id="parent">
  <div id="fils">Mon bloc centré horizontalement</div>
</div>

Résultat :

Cette technique ne fonctionne pas pour le centrage vertical.

Votre avis sur la définition text-align en CSS