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".

Centrer du texte sur la page

Créer une colonne de texte

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

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;}