The Pocket HTML Tutorial

Vous avez probablement remarqué que la plupart de vos paragraphes HTML n’ont pas d’indentation initiale. Vous pouvez utiliser margin ou padding pour pousser les paragraphes sur la droite, mais qui affecte l’ensemble du paragraphe, pas seulement la première ligne. De plus, le texte est toujours aligné à gauche. Comment faire du texte centré ou du texte aligné à droite?

Comme nous l’avons vu dans la section « bordures”, le modèle de boîte contrôle la zone autour du texte. Cette section montre comment déplacer le texte à l’intérieur de la boîte elle-même.,

indentation du texte

pour indenter du texte, utilisez la propriététext-indent. L’extrait CSS suivant ajoute un retrait 2.0 em à tous les paragraphes:

Si vous entrez une valeur négative pourtext-indent, la première ligne du texte se déplace vers la gauche. Ceci est utile pour créer des « retraits suspendus » pour les en-têtes et similaires. La seule astuce est que vous devez définir le remplissage du bloc contenant en conséquence.

le « conteneur”div a un remplissage uniforme de 5px tout autour, sauf pour le remplissage gauche, qui est de 30px., L’élémenth2 a son retrait de texte défini sur négatif 25px. Le résultat est que le h2 changements 30px vers la droite en raison du rembourrage, puis il passe 25px vers la gauche en raison de la mauvaise text-indent. Tous les autres éléments sont à 30 pixels du bord gauche. Le résultat est un retrait suspendu de 25px.

alignement Horizontal

la propriété text-align vous permet d’aligner le texte à droite, à gauche ou au centre de son bloc contenant., Les quatre options sont:

• left: aligne le texte le long du bord gauche de la boîte, laissant un bord déchiqueté vers la droite. C’est la valeur par défaut.

• center: centre le texte dans la boîte.

• right: Aligne le texte le long du bord droit de la zone, en laissant un bord loqueteux vers la gauche.

• justify: Aligne le texte le long des bords droit et gauche de la boîte. Cela peut entraîner l’espacement des mots dans la ligne pour devenir inégale., L’optionjustify n’est pas aussi bien prise en charge dans certains navigateurs plus anciens.

examinons les quatre options:

gardez à l’esprit quetext-align aligne le texte et d’autres contenus en ligne dans les boîtes. Cela n’affecte pas les blocs eux-mêmes. Par exemple, vous ne pouvez pas utiliser text-align: center pour centrer une boîte plus petite dans une boîte plus grande. Ce genre de chose fait partie d’un concept plus avancé appelé positionnement CSS.