### Alignement horizontal

C'est avec la propriété text-align que l'on peut définir l'alignement horizontal du texte dans son conteneur.
Le texte peut être aligné à gauche (`left` - par défaut), aligné à droite (`right`), centré (`center`) ou justifié (`justify`).

L'alignement à gauche est à privilégier pour les textes de plusieurs phrases. L'alignement centré est à utiliser seulement pour un texte court (une phrase de quelques mots) ou pour les libellés de zones cliquables ou de boutons. La justification n'est pas toujours bien réalisée par les moteurs de rendu des navigateurs qui peuvent provoquer des espacements trop importants entre les mots et rendre le texte peu lisible et peu agréable à l'oeil.

Exemple : alignement horizontal
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <article> <h3>La Guerre des Etoiles du Milieu<br>et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </article> </body> </html>
Fichier CSS : styles.css
html { font: 13px Tahoma, Geneva, Verdana, sans-serif; } article { width: 350px; border: 1px solid #ccc; } h3 { text-align: center; } p:nth-of-type(2) { text-align: right; } p:nth-of-type(3) { text-align: justify; }

### Alignement vertical

Etrangement, aligner verticalement un texte (ou un bloc) à l'intérieur d'un bloc n'est pas une chose qui se fait de façon naturelle et intuitive. |

La propriété vertical-align permet d'aligner verticalement :

- des élements de type en ligne,
- des éléments à l'intérieur d'un élément de type `display: table-cell`

L'alignement d'éléments de type en ligne se fait par rapport à la hauteur de ligne (line-height) du parent.

L'alignement d'éléments à l'intérieur d'un élément de type `display: table-cell` se fait par rapport à la hauteur (height) de cet élément.

On peut forcer l'affichage des éléments de type bloc en affichage en ligne avec la propriété display et les valeurs `inline` et `inline-block`.

Exemple : alignement vertical
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <article> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> </article> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } article { border: 1px solid #aaa; padding: 10px; width: 400px; height: 200px; /* hauteur du bloc */ line-height: 200px; /* hauteur de ligne égale à la hauteur du bloc pour permettre l'alignement vertical */ } p { display: inline-block; /* forcer l'affichage en ligne */ vertical-align: middle; /* alignement vertical au milieu*/ line-height: normal; /* pour ne pas hériter du parent*/ }

Exemple des différentes valeurs possibles pour la propriété vertical-align.

Exemple : valeurs de vertical-align
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p><span>Vertical-align</span> <span class="vertical1">top</span></p> <p><span>Vertical-align</span> <span class="vertical2">super</span></p> <p><span>Vertical-align</span> <span class="vertical3">sub</span></p> <p><span>Vertical-align</span> <span class="vertical4">text-top</span></p> <p><span>Vertical-align</span> <span class="vertical5">middle</span></p> <p><span>Vertical-align</span> <span class="vertical6">bottom</span></p> <p><span>Vertical-align</span> <span class="vertical7">20 pixels</span></p> <p><span>Vertical-align</span> <span class="vertical8">-20 pixels</span></p> </body> </html>
Fichier CSS : styles.css
html { font: 20px Tahoma, Geneva, Verdana, sans-serif; } span {border: 1px solid #aaa;} span + span {font-size: 13px;} .vertical1 { vertical-align: top; } .vertical2 { vertical-align: super; } .vertical3 { vertical-align: sub; } .vertical4 { vertical-align: text-top; } .vertical5 { vertical-align: middle; } .vertical6 { vertical-align: bottom; } .vertical7 { vertical-align: 20px; } .vertical8 { vertical-align: -20px; }

#### Aligner image et texte

L'alignement vertical est très utile pour aligner une image sur du texte, en particulier pour des éléments décoratifs comme des pictogrammes. On utilisera le plus souvent la valeur `middle`.

Exemple : alignement texte / image
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p><img src="../exemples/img/fleche_droite.png">Sans alignement</p> <p><img src="../exemples/img/fleche_droite.png" class="vertical">Alignement milieu</p> </body> </html>
Fichier CSS : styles.css
html { font: 18px Tahoma, Geneva, Verdana, sans-serif; } .vertical { vertical-align: middle; }