JUSTIFICATION, CENTRAGE TEXTE,
IMAGE ET CADRE


Les opérations de centrage, justification des éléments peuvent paraître banales. on risque cependant de perdre beaucoup de temps si on ne les considère pas sérieusement. Il faut savoir tout d'abord que tout élément est placé par défaut à gauche.

Centrer un cadre ou un tableau d'une largeur définie est réalisé par la commande de style: margin-right:auto, margin-left:auto;

<div style="margin-right:auto, margin-left:auto;width:300px;height:50px;background-color:gray">
</div>




Centrer les éléments qui se trouvent à l'intérieur d'un div (texte ou image) peut être obtenu par la commande text-align:center

<div style="text-align:center">
MON TITRE CENTRÉ
<br><br>
<img src="mafleur.png">
</div>


MON TITRE CENTRÉ

fleur


Pour le texte, on peut spécifier la commande justify à droite et à gauche, right pour justifier à droite et left pour justifier à gauche: text-align:justify, text-align:right, text-align:left

On peut par un seul div centrer un conteneur dans lequel le texte sera justifié (les images, elles, seront à gauche, et on peut en incluant des div à l'intérieur centrer certaines parties, par exemple des titres ou des images. En revanche, un autre div ou un tableau à l'intérieur ne sera centré que si dans son style se trouve la spécification margin-right:auto;margin-left:auto;

<div style="width:300px;height:300px;margin-right:auto;margin-left:auto;background:lightgray;text-align:justify">

<div style=text-align:center;>
MON TITRE CENTRÉ
</div>

<br><br>
De nouveau mon texte est justifié dans cette partie car j'ai refermé le div spécifiant un centrage pour le titre précédent. Et là dessous j'ai centré un div bleu.
<br><br>

<div style="margin-right:auto;margin-left:auto;width:80px;height:20px;background-color:blue;">
</div>

</div>




Mon texte ici va se trouver justifié à droite et à gauche dans un conteneur de 600 pixels. le titre qui suit sera centré.

MON TITRE CENTRÉ

De nouveau mon texte est justifié dans cette partie car j'ai refermé le div spécifiant un centrage pour le titre précédent. Et là dessous j'ai centré un div bleu.




Traquenard Attention, indiquer dans le style d'un cadre ou d'un tableau la commande "text-align:center;" ne permettra jamais d'obtenir le centrage du cadre ou du tableau. Cette commande permet de centrer les éléments à l'intérieur du cadre (texte, image). Dans le style du cadre se trouve donc une commande qui gère l'emplacement du cadre lui-même et une autre qui gère l'emplacement de certains éléments qui sont à l'intérieur: images et texte, mais pas les cadres.

SOMMAIRE    SUITE