centrer - Exercices

Centrer 1.

Centrer horizontalement et verticalement le texte du paragraphe p dans l'article.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Centrer </title>
        <style>
              article{
                border: 1px solid blue;
                width: 500px;
                height: 300px; 
               }
              p{
                width: 50%;
              }
        </style>
    </head>
    <body>
         <article>
            <p> Les petits poissons rouges,  les petits pois sont verts. A force de taper sur des clous, il était devenu marteau.
            </p>
         </article>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Centrer </title>
        <style>
            article{
                border: 1px solid blue;
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
               }
              p{
                display: inline-block;
                vertical-align: middle;
                line-height: normal;/* retour à la normale, sinon hérite du père */
                width: 50%;
              }  
        </style>
    </head>
    <body>
        <article>
            <p> Les petits poissons rouges,  les petits pois sont verts. A force de taper sur des clous, il était devenu marteau.
            </p>
         </article>
    </body>
</html>

Centrer 2.

On a placé ci-dessous la boîte verte dans la boîte orange avec une position absolue top:50%; left:50%; dans l'espoir de centrer la boîte verte dans l'orange. Mais ce n'est pas le centre de la boîte verte qui est ainsi placée au centre de la boîte orange.

top:50%; place le bord supérieur de la petite boîte au milieu de la hauteur de la grande. left:50%; place le bord gauche de la petite boîte au milieu de la grande.

Modifiez le code css pour que les centres des deux boîtes se superposent. Pour cela, utilisez des marges négatives.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> centrer </title>
        <style>
               body{margin : 10px;}
              * {margin: 0; padding:0; border:0;}
              div{ 
                width: 250px;
                height: 250px;
                background-color: orange;
                position: relative;}
                
              p{
                width: 50px; 
                height: 50px;
                background-color: green;
                position: absolute;
                top:50%;
                left:50%;
                }
               
        </style>
    </head>
    <body>
         <div> <p> </p></div>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> centrer </title>
        <style>
              body{margin : 10px;}
             * {margin: 0; padding:0; border:0;}
             div{ 
                width: 250px;
                height: 250px;
                background-color: orange;
                position: relative;}
                
              p{
                width: 50px; 
                height: 50px;
                background-color: green;
                position: absolute;
                top:50%;
                left:50%;
                /* marges négatives de la moitié 
                des longueurs de la petite boîte : */
                margin-left: -25px;
                margin-top:-25px;
                }
        </style>
    </head>
    <body>
        <div> <p> </p></div>
    </body>
</html>

Centrer 3.

On reprend le code de l'exercice précédent. L'objectif est le même que dans l'exercice précédent. Cherchez cette fois à résoudre le problème d'un centrage (sur le centre de la boîte comme précédemment) à l'aide des transformations (translate).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> centrer </title>
        <style>
               body{margin : 10px;}
              * {margin: 0; padding:0; border:0;}
              div{ 
                width: 250px;
                height: 250px;
                background-color: orange;
                position: relative;}
                
              p{
                width: 50px; 
                height: 50px;
                background-color: green;
                position: absolute;
                top:50%;
                left:50%;
                }
               
        </style>
    </head>
    <body>
         <div> <p> </p></div>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> centrer </title>
        <style>
              body{margin : 10px;}
             * {margin: 0; padding:0; border:0;}
              div{ 
                width: 250px;
                height: 250px;
                background-color: orange;
                position: relative;}
                
              p{
                width: 50px; 
                height: 50px;
                background-color: green;
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                }
               
        </style>
    </head>
    <body>
         <div> <p> </p></div>
    </body>
</html>