Le langage HTML/Placement des objets

Le placement des objets relève de la mise en forme. Certes, on a expliqué en introduction que le HTML ne concernait pas la mise en forme mais seulement la description du contenu ; par exemple, la balise <blockquote>…</blockquote> a pour effet de décaler le texte vers la droite, mais ce n'est qu'une conséquence de la feuille de style appliquée au bloc de citation.

Style de texte

Liens

Nous allons faire une exception à cette règle pour le placement des objets. En effet, avant le CSS, le placement des objets était déjà une préoccupation, le W3C a donc créé des balises permettant ce placement — donc de la mise en forme —, on peut donc toujours trouver de telles balises dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.

Ancien HTML

Par défaut, les objets — texte, images… — sont alignés à gauche, à moins que le réglage du navigateur ou la feuille de style en décide autrement.

Il est possible de centrer les objets avec les balises <center>…</center>.
Pour aligner à droite, il faut utiliser la balise <div align="right">…</div>.
Le texte, quant à lui, peut être justifié avec la balise <div align="justify">…</div>.

On peut aussi indiquer l'alignement à l'intérieur de la balise de description, par exemple :

pour centrer un paragraphe, on peut utiliser <p align="center">…</p> ;
pour centrer une image, on peut utiliser <img src="…" … align="center" />.

Méthode moderne : avec du CSS

Ceci est maintenant obsolète avec le CSS. Il est désormais recommandé de ne pas utiliser les balises ci-dessus et d'avoir recours au CSS.

Éléments de type ligne

Les éléments de type ligne (inline) sont ceux qui composent une ligne de paragraphe pouvant contenir du texte et certains éléments considérés comme inline (ou déclaré avec une propriété CSS display valant inline ou inline-block) dont les images, les zones <span>, les balises de formatage (<b> <i> <u> <s> <ins> <del> ...).

pour du texte : <div style="text-align:valeur">…</div>,
où valeur est left (gauche), right (droite), center (centré) ou justify (justifié);
pour une image :
- pour aligner à droite : <div style="text-align: right;padding-right: 10px">…</div> (ce qui laisse une marge de 10 pixels à droite) ;
- pour centrer : <div style="text-align: center">…</div>.

Exemple

<div style="text-align: right;">
   Bla bla bla bla bla bla bla 
</div>
<div style="text-align: center;">
   <img src="http://fr.wikibooks.org/images/wiki-textbook.png" width="129" />
</div>

donne :

Bla bla bla bla bla bla bla

La propriété CSS text-align n'a par contre aucun effet sur les éléments de type bloc eux-mêmes comme <div> mais seulement sur leur contenu, comme le montre l'exemple suivant :

<div style="text-align: center;">
<div style="width:480px; border: solid 4px #ccc8;">
Élément de type bloc.
</div>
</div>

donne :

Élément de type bloc.

Éléments de type bloc

Les éléments de type bloc peuvent être placés en CSS soit par des coordonnées absolues ou relatives, soit en définissant des marges autour. Pour le centrage, comme dans l'exemple précédent, les marges doivent être définies à automatique pour répartir l'espace disponible restant équitablement à gauche et à droite.

<div>
<div style="margin:auto; width:480px; border: solid 4px #ccc8;">
Élément de type bloc.
</div>
</div>

donne :

Élément de type bloc.