text-align CSS propriété

Définition de la CSS text-align.

La propriété d'Alignement CSS text-align permet de définir l'alignement horizontal du texte ou plus globalement les éléments dits dans un élément (X)HTML dit qui les contient.

Exemple de syntaxe CSS text-align :
text-align : left;
text-align : center;
text-align : right;
text-align : justify;
text-align : ".";

La propriété de feuille de style text-align CSS peut prendre comme valeur d'alignement :

  • left : le texte est aligné à gauche de la "zone de contenu" de l'élément.
  • center : le texte est aligné au milieu de la "zone de contenu" de l'élément.
  • right : le texte est aligné à droite de la "zone de contenu" de l'élément.
  • justify : le texte est aligné à droite et à gauche de la "zone de contenu" de l'élément, influencée par ou l'attribut HTML dir.
  • chaîne : spécifie une chaîne caractères sur laquelle le contenu des cellules d'un tableau vont s'aligner. Utilisée seulement pour le cellules d'un tableau (reconnue par aucun navigateur).
  • inherit : hérite de la propriété CSS text-align de son parent (CSS2).

Conditions d'application de la CSS text-align.

La propriété de feuille de style text-align CSS est applicable sur l'ensemble des balises HTML ou XHTML de type block ou inline (, , , ...).

Héritage des valeurs Css de text-align.

Les balises filles HTML ou XHTML héritent de la propriété de feuille de style text-align CSS.

Problème d'interprétation de text-align en Css.

La propriété de feuille de style css text-align ne pose aucun problème d'interprétation, sauf pour la valeur text-align : chaîne qui ne semble pas être reconnue par aucun navigateur.

Règles de syntaxes CSS pour text-align.

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

Zone dans laquelle text-align agitLa "zone de contenu" est entourée par les dits marges intérieures. L'élément de type inline s'aligne horizontalement dans la "zone de contenu" du premier parent trouvé dont le 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 ( ou ). 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 .

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

Le code HTML :
<!-- é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 :

texte à gauche
Mon bloc est aligné à gauche et son texte si
texte à gauche
texte à gauche
Mon bloc est aligné à droite et son texte aussi
texte à gauche
texte à gauche
Mon bloc est aligné à droite et son texte à gauche
texte à gauche

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 en auto.

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

Le code HTML :
<div id="parent">
  <div id="fils">Mon bloc centré horizontalement</div>
</div>

Résultat :

Mon bloc centré horizontalement

Cette technique ne fonctionne pas pour le centrage vertical.

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

Votez pour la définition CSS text-align

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/text-align-css.html Votes: 4.4 / 5 - 75 votes
Cliquez sur une étoile pour voter.