: css

le centrage horizontal

Le centrage horizontal est beaucoup plus simple à mettre en oeuvre que le centrage vertical.

Centrer un bloc

pour centrer un block, il suffit de lui attribuer un width ainsi qu'un margin:auto;

Centrer des éléments inline

un élément inline réagira avec la propriété text-align:center appliquée sur un ancêtre.

Centrer un élément en absolut

2 méthode: les marges négatives ou le margin:0 auto (cf centrage vertical)

centrer des flottant

L'exercice devient bien plus intéressant ;) on se contente souvent, pour se simplifier la tâche, de donner des valeurs fixes à un conteneur dans le flux à qui on attribue des marges auto. il est pourtant possible de centrer des flottant grâce à un double positionnement relatif:

<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8">
        <title>centrage horizontal</title>
        <style>

                ul {
                        list-style:none;
                        margin:0;
                        float:right;
                        position:relative;
                        right:50%;
                }

                li {
                        float:left;
                        background:#ccc;
                        padding:0.7em 10px;
                        margin:10px;
                        position:relative;
                        left:50%;
                }


        </style>
</head>

<body>
        <ul>
                <li>les float</li>
                <li>peuvent être</li>
                <li>centrés grâce à un</li>
                <li>double position relatif de 50%</li>
        </ul>
</body>
</html>
Editer