Bienvenue sur le site de Jef

Centrage de texte

La façon la plus simple pour centrer une ligne de texte dans un paragraphe ou une entête est d'utiliser la propriété "text-align":

p  { text-align:center; }
h2 { text-align:center; }

Centrage d'un bloc

Quelque fois c'est un bloc entier que l'on désire centrer. Dans ce cas il faut utiliser "margin" avec "auto".

p.blocktext { width: 6em; 
              margin-left:auto;
              margin-right:auto;
               }

Centrage d'une image

Pour une image, il faut la définir comme un block et lui appliquer des "margin:auto".

img.milieu  { display:block; 
              margin-left:auto;
              margin-right:auto;
               }

...
...

<div class="cadre">
L'image suivante est centrée
<img class="milieu" src="/old/faq/images/woolly-mc.png" />    
</div>

Alignement vertical

L'alignement vertical est assez difficile et suivant les navigateurs ne donne pas le résultat escompté.
Une des solutions consiste à utiliser les propriétés d'une table car la propriété "vertical-align" s'applique parfaitement dans la cellule d'un tableau.
Il faut définir la boite avec "display:table;" puis le texte comme une cellule avec "display:table-cell;".

.cadre      { display:table; }
p.vertical  { min-height: 10em; 
             display: table-cell; 
             vertical-align:middle; }

...
...

<div class="cadre">
<p class="vertical">Ce texte est aligné verticalement.</p>   
</div>

Vous pouvez voir le résultat dans l'exemple suivant:

Alignement de texte sur une même ligne

Il est possible de positionner des éléments sur la même ligne (à gauche, au centre, à droite par exemple) sans avoir forcément recours à un tableau de mise en page.

CSS:

p      { text-align: right; }
p span { float:left; }

html:

<p><span>partie à gauche</span>partie à droite</p>

Dans le cas de lignes multiples, il convient d'utilier la règle clear: both pour éviter les chevauchements de flottants.

p      { text-align: right; clear:both; }
p span { float:left; }

html:

<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>
<p><span>partie à gauche</span>partie à droite</p>

En utilisant judicieusement la position float, il est possible de placer trois éléments: un à gauche, un au centre et un à droite

CSS:

p             { text-align:center; }
p span.gauche { float:left; }
p span.droite { float:right; }

html:

<p><span class="gauche">partie à gauche</span><span class="droite">partie à droite</span>partie au centre</p>

De la même manière que précédemment, il est possible d'avoir des lignes multiples en rajoutant la propriété clear.

p             { text-align:center; clear:both; }
p span.gauche { float:left; }
p span.droite { float:right; }

Il est aussi possible de faire des colonnes grâce aux sélecteurs d'éléments consécutifs

selecteur_X + selecteur_Y { /* style; */ }

Ainsi, il est possible de faire un tableau sans tableau en utilisant la balise pour faire les listes.

CSS:

ul               { list-style-image:none; list-style-type:none; }
li span          { width:10px;  text-align:left; display:inline-block; }
li span+span     { width:80px;  text-align:center; padding-left:5px; }
li span+span+span{ width:120px; text-align:left;   padding-left:5px; }

html:

<ul>                                             
    <li><span>01</span><span>juin</span><span>Jacques</span></li>
    <li><span>02</span><span>juin</span><span>Benjamin</span></li>
    etc.
    etc.
</ul>

Alignement vertical du texte et d'un image

Pour aligner un texte verticalement par rapport à une image il faut utiliser vertical-align:

p img { vertical-align: middle; }

<p><img src="/old/faq/images/woolly-mc.png" />  Ceci est un mouton!<p>

Les paramètres de vertical-align