Centrer du texte sur la page

Créer une colonne de texte

Il songe. Il s'est assis rêveur sous un érable. Entend-il murmurer la forêt vénérable ? Regarde-t-il les fleurs ? regarde-t-il les cieux ? Il songe. La nature au front mystérieux Fait tout ce qu'elle peut pour apaiser les hommes ; Du coteau plein de vigne au verger plein de pommes Les mouches viennent, vont, reviennent ; les oiseaux Jettent leur petite ombre errante sur les eaux ; Le moulin prend la source et l'arrête au passage ; L'étang est un miroir où le frais paysage Se renverse et se change en vague vision ;Tout dans la profondeur fait une fonction ; Pas d'atome qui n'ait sa tâche ; tout s'agite ;

Ouvrez le code html du module texte et rajoutez du style : remplacez le premier <p> par : <p style="max-width:400px;margin:0 auto";>

Il songe. Il s'est assis rêveur sous un érable. Entend-il murmurer la forêt vénérable ? Regarde-t-il les fleurs ? regarde-t-il les cieux ? Il songe. La nature au front mystérieux Fait tout ce qu'elle peut pour apaiser les hommes ; Du coteau plein de vigne au verger plein de pommes Les mouches viennent, vont, reviennent ; les oiseaux Jettent leur petite ombre errante sur les eaux ; Le moulin prend la source et l'arrête au passage ; L'étang est un miroir où le frais paysage Se renverse et se change en vague vision ;Tout dans la profondeur fait une fonction ; Pas d'atome qui n'ait sa tâche ; tout s'agite ;

Ainsi la colonne a une largeur maximale (ici, 400px, que vous pouvez modifier) et une marge automatique à droite et à gauche, ce qui centre le bloc dans son contenant, propriété compatible avec le responsive.


Pour aller plus loin, vous pouvez ajouter une classe, et modifier ainsi à la volée toutes vos colonnes de la m^me classe sur le site, en changeant les propriété dans "modifier le head".

Dans le code des blocs texte à centrer, vous remplacez le premier <p> par <p class="centrage">

Dans "modifier le head", entre les balises de déclaration de css, vous décrivez la classe :

.centrage {max-width:400px;margin:0 auto;}