Contenu

• Les instructions
• Comment aligner le texte
• gauche {
• droit {
• centre {
• Comment centraliser les divisions, contours et corps
• Comment
• Ce dont vous avez besoin

Plutôt que d'utiliser les attributs d'alignement HTML contenus dans les balises HTML marquant le texte, il est préférable que les concepteurs Web transfèrent les informations de présentation (options d'alignement) à la feuille de style. Cet article explique comment aligner du texte et centrer des éléments de page plus volumineux, tels que des divisions.

Les instructions

Les feuilles de style vous permettent d'aligner et de centrer plus que le texte (image de la mise en page du site par 6922Designer de Fotolia.com)

Comment aligner le texte

1. Pour aligner le texte dans un bloc de texte normal, tel qu'un paragraphe ou une citation, utilisez la propriété text-align.

2. Les options de valeur pour la propriété text-align sont gauche, droite, centre et justification. Le texte justifié n'étant pas très lisible sur le Web, l'illustration montre uniquement les alignements gauche, droit et central. Dans cette illustration, chaque paragraphe comporte une bordure noire pour montrer la taille de l'élément de bloc sur la page si un réglage de largeur n'est pas appliqué à l'élément.

   
   

3. Généralement, un élément est affecté à un identifiant ou à une classe. L'alignement du texte sur tous les éléments de cet id ou de cette classe est défini avec une règle, telle que:

   gauche {

   text-align: left; }

   droit {

   text-align: right; }

   centre {

   text-align: center; }

Comment centraliser les divisions, contours et corps

1. Vous souhaiterez peut-être centrer toute une mise en page ou une grande mise en page. Dans ces cas, une technique CSS différente est utilisée.

2. Vous appliquez la règle CSS au sélecteur du plus grand élément que vous souhaitez centrer. Il peut s'agir d'un élément de corps, d'une division de limite ou d'une division de conteneur.

3. Le centrage par cette méthode n'affecte pas l'alignement du texte. L'élément centré conservera l'alignement gauche par défaut du texte dans l'élément centré.

   
   

4. Ce qui suit est une illustration d'un élément du corps entier (avec une bordure noire pour la clarté) centré sur une page. Une largeur doit être définie pour l'élément, puis les marges gauche et droite sont définies sur automatique. Ceci est fait comme suit:

   corps {largeur: 80%; marge droite: auto; marge gauche: auto; bordure: 1px noir uni; }

Comment

• Normalement, vous n'avez pas besoin d'utiliser align-left, car l'alignement gauche est la valeur par défaut.Toutefois, vous devez être conscient de son existence si vous devez redéfinir ultérieurement le texte précédemment centralisé ou aligné à droite. La largeur de l'élément à centrer peut être définie en pixels, en pourcentages ou en ems.

Ce dont vous avez besoin

• Éditeur de texte
• Éditeur HTML
• Connaissances de base en HTML