centrer - Cours

text-align: center;

Les valeurs possibles pour la propriété text-align sont left, right, center, justify.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> text-shadow  </title>
        <style>
            p{
                text-align: center;
                border:1px solid brown; 
            }
        </style>
    </head>
    <body>
        <p>  Du texte centré horizontalement avec <code>text-align:center;</code></p>
    </body>
</html>

vertical-align: middle;

La propriété vertical-align peut prendre les valeurs middle, baseline, sub, super, top, text-top, bottom, text-bottom , ou un pourcentage.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> vertical-align  </title>
        <style>
            img.a{vertical-align : bottom;}
            img.b{vertical-align : middle;}
            p{  border:1px solid brown;
                margin : 8px;
                line-height: 4;/* hauteur de ligne augmentée pour bien voir le placement de l'image */
             }
        </style>
    </head>
    <body>
        <p>Une image bottom <img src="images/html5.png" alt="html5" class="a"> dans une boîte <code>p</code>. </p>
        <p>Une image middle <img src="images/html5.png" alt="html5" class="b"> dans une boîte <code>p</code>. </p>
    </body>
</html>

line-height

line-height est la hauteur totale d'une ligne (c'est donc la hauteur inter-lignes). Il peut être parfois intéressant de jouer sur cette propriété pour centrer verticalement comme l'illustre les deux exemples ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> line-height  </title>
        <style>
           p.a{ 
            border: 1px solid brown;
            height: 40px;
            line-height: 40px;/* égale à height pour centrage vertical */
            width: 400px;
           }
          p.b{ 
            border: 1px solid brown;
            height: 40px;
            line-height: 20px; 
            width: 400px;
            }
        </style>
    </head>
    <body>
        <p class="a"> Texte centré verticalement.</p>
        <p class="b"> Texte non centré verticalement.</p>
    </body>
</html>

margin: 0 auto;

On peut centrer horizontalement un bloc (de width défini explicitement) dans un autre bloc en déclarant les marges gauche et droite à la valeur auto.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> margin  </title>
        <style>
            body{
                border: 1px solid black;
            }
            div{
                width: 50%; /* largeur : 50% de celle du conteneur*/
                margin: 10px auto;/* marge haute et basse à 10px, gauche et droite à auto */
                border: 1px dotted red;/*cadre rouge pointillé*/
            }
        </style>
    </head>
    <body>
        <div>Un div centré horizontalement par la valeur <code> auto </code> pour les marges gauche et droite.</div>
    </body>
</html>