Header
Partagez | 

[HTML/CSS] TOUT sur le centrage horizontal et vertical

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Sam 4 Nov - 12:05

Bonjour à tous !

Me revoilà avec un nouveau tutoriel adapté de mon site, en espérant qu'il soit utile à la communauté ici Wink.

TOUT sur le centrage horizontal et vertical


Bonjour !

Dans ce tutoriel, nous allons apprendre à centrer nos textes, nos balises, que ce soit verticalement ou horizontalement, quelque soit l'état de ces derniers ! En passant par les flexbox jusqu'aux positions absolues, nous verrons tout sur le centrage ! C'est parti èé !

Le centrage horizontal

Commençons donc notre tutoriel par le centrage horizontal. Le centrage horizontal consiste à centrer un élément dans le sens de la largeur. Etant donné que l'élément peut être de différentes natures, nous allons essayer de toutes les traiter ! A commencer par le centrage de texte.

Centrer horizontalement des textes

Pour centrer du texte horizontalement dans une balise, c'est simple au possible... Il suffit d'utiliser la propriété text-align de CSS, avec la valeur "center". Voici un exemple ! Prenons ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
        }
     </style>
   </head>
<body>
   <p id="container">Moi je veux être centré :'(</p>
</body>
</html>
Regardons le résultat :

Pour centrer ce texte, nous utiliserons text-align: center; :
Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
           text-align: center;
        }
     </style>
   </head>
<body>
   <p id="container">Ca y est, je suis centré !</p>
</body>
</html>
Et regardons le résultat :

Notre texte est bien centré ! Enchainons avec le centrage d'une balise de type block en position statique !

Centrer horizontalement des balises blocks statiques

Dans ce cas, le centrage se fait de manière assez aisée avec la propriété margin utilisée avec la valeur auto ou 0 auto;. Utiliser cette propriété permettra de centrer horizontalement le bloc par rapport à sa balise parente.
Essayez ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>
    #container{
       width: 600px;
       height: 200px; /** Pas obligatoire pour margin: auto car on centre horizontalement. Il faut donc savoir essentiellement la largeur du bloc, pas sa hauteur **/
       margin: auto;
       background: orangered;
    }
   </style>
</head>
<body>
   <p id="container">Tralalala</p>
</body>
</html>
Vous verrez que le bloc est bien centré dans sa balise parente, c'est à dire la balise body, c'est à dire centrée dans la page Wink. (puisque body englobe toute la page). Il est également possible de modifier le type de la balise qu'on veut centrer horizontalement en le mettant à inline-block et en attribuant la propriété text-align: center; à la balise parente comme suit :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

     div{
        text-align: center;
        border: 4px solid green;
     }
    #container{
      width: 600px;
      height: 200px;
      background: orangered;
      display: inline-block;
    }
  </style>
</head>
<body>
   <div>
        <p id="container">Tralalala</p>
     </div>
</body>
</html>
Nous avons aussi le choix d'utiliser les flexbox (mais attention, cette technique ne fonctionne pas sur IE < 11). Pour cela, on attribue le type "flex" à la balise parente et on utilise la propriété "justify-content: center;".
Voici un exemple :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      display: flex;
      justify-content: center;
      border: 4px solid green;
   }
    #container{
       width: 600px;
       height: 200px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Et voilà pour cette partie !

Centrer horizontalement des balises blocks en position absolue pour relative

Essayons avec la technique du margin: auto :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
        <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
       margin: auto;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Le résultat n'est pas fameux :

Si on avait mis position: relative, on aurait obtenu ça :


Nous allons donc voir régler tout ça...
Commençons dans le cas où nous avons notre paragraphe qui est en position absolue. Là, nous devons mettre la balise parente par rapport à laquelle nous voulons centrer l'élément dans une position relative. Dans notre cas, on veut le centrer horizontalement par rapport à la div. On met donc la div en position relative. Du coup, les propriétés left, right, top et bottom s'opèreront par rapport à la div ! Pour continuer, il suffit maintenant d'attribuer un left à 50% sur le paragraphe, ainsi qu'une marge à gauche négative équivalente à la moitié de la largeur totale du paragraphe. Ainsi, cette technique implique de savoir la largeur du paragraphe ! (nous verrons juste après la technique dans le cas où nous ne la connaissons pas). Imaginons que notre paragraphe fasse 300px, la marge à gauche sera égale à -150px ! Du coup, voici le code qu'on a et son résultat :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
        <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      position: relative;
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>

Le paragraphe est bien centré ! Si maintenant le paragraphe est en position relative (ce qui est moins propre...), c'est plus simple : on n'a pas besoin de mettre la div en position relative :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: relative;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>

Dans le cas maintenant où ne ne connaissons pas la largeur du paragraphe, nous allons devoir utiliser un subterfuge ! Mettons notre paragraphe en position absolue et notre div en position relative. Il suffit alors de faire rotationner (hé oué) le paragraphe de -50%, après l'avoir déplacé à gauche de 50%
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      position: relative;
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Le résultat est bien celui voulu :


Et voilà !

Centrer horizontalement une balise de type block en position fixée

Là, la balise sera forcément centrée horizontalement par rapport à la balise body, donc centrée horizontalement dans la page, puisque de position fixe. Mais pour arriver à cela, il faut quand même utiliser les mêmes techniques que précédemment :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: fixed;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Même s'il est enfant de la div, il se centre par rapport à la taille du navigateur. Bien, passons maintenant au centrage vertical !

Le centrage vertical

C'est souvent celui-ci qui pose problème !
Comme précédemment, nous allons d'abord voir le centrage vertical des balises de type inline, donc des textes généralement.

Centrer verticalement des textes

Dans le cas où nous connaissons les dimensions des balises, cela simplifie le travail car nous ne travaillerons pas sur le type des balises. Dans le cas contraire, nous y serons contraints ! Commençons donc par la technique lorsqu'on sait les dimensions ! Pour cette méthode, il suffit d'attribuer à la balise qu'on veut centrer verticalement la propriété line-height qui a pour valeur la même que la valeur de la propriété height de la balise parente (ou de cette balise, mais il est rare d'attribuer des tailles aux balises de type inline) !
Par exemple, si on a un span compris dans une div qui fait 200px de haut, hé bien on fera :
Code:
span{line-height: 200px}
Sachez qu'il est également possible d'attribuer ce line-height directement à la balise parente ! Regardez les deux codes :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
      line-height: 200px;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Et :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       background: orangered;
       line-height: 200px;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Le résultat est le même et les deux codes sont valides aux normes W3C !

Si par contre, on avait des valeurs inconnues pour les dimensions, par exemple avec des pourcentages comme dans ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #wrapper {
      height: 300px;
      background-color: purple;
   }

   #wrapper div{
      width: 500px;
      height: 20%;
      border: 5px solid green;
      line-height: 100%;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div id="wrapper">
      <div>
         <span id="container">Lorem ipsum dolor sit amet.</span>
      </div>
   </div>
</body>
</html>
Le résultat n'est pas celui attendu :

Du coup, les deux solutions quand on n'a pas les dimensions sont :
- Se débrouiller pour les avoir (dans l'exemple au dessus, on peut faire 300 * (20/100), ce qui donne 60px. C'est donc la hauteur de la div, et donc on peut mettre un line-height 60px, ça fonctionne très bien).
- Modifier le type de la balise parente : il existe une propriété CSS qui permet de centrer verticalement, il s'agit de vertical-align. Mais cette propriété ne fonctionne qu'avec les tableaux HTML... Du coup, la technique consiste à modifier le type de la balise parente pour qu'elle soit considérée comme un tableau, de manière à utiliser vertical align qui fonctionnera alors sur la balise enfante qu'on veut centrer !
Du coup, on va attribuer le type "tableau" à notre balise parente grâce à display: table-cell;, puis on va utiliser vertical-align: middle; :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Et le résultat est parfait !

Néanmoins attention avec cette technique, car tous les éléments dans la div seront centrés verticalement ensuite, quel que soit leur type. Essayez donc ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
      <span style="background: blue;">Deuxième span.</span>
      <div style="background: grey; width: 80%; height: 20%;">Une div dans la div.</span>
   </div>
</body>
</html>

Voilà !

Centrer verticalement des balises blocks statiques

La première technique consiste à utiliser, comme avec les balises inline, le display table cell :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
       width: 300px;
       height: 80px;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sagittis massa, tristique vulputate nisl. Donec non leo quis purus egestas porta euismod vel diam. </p>
   </div>
</body>
</html>
La deuxième consiste à utiliser les flexbox (attention, elles ne sont supportées qu'à partir de IE11). On attribue le type flex à la balise parente et on utilise la propriété align-items avec comme valeur "center". On obtient :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: flex;
      align-items: center;
   }
    #container{
       background: orangered;
       width: 300px;
       height: 80px;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sagittis massa, tristique vulputate nisl. Donec non leo quis purus egestas porta euismod vel diam. </p>
   </div>
</body>
</html>
Et le paragraphe est bien centré :


Centrer verticalement des balises blocks en position absolue ou relative

Dans ce cas, les techniques sont les mêmes qu'avec le centrage horizontal sauf qu'on n'utilisera non pas left, mais top, et non pas translateX mais translateY. On a alors, dans le cas où on connait les dimensions des balises :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

  div{
      width: 300px;
      height: 150px;
      border: 5px solid green;
  }
    #container{
      position: relative;
      top: 50%;
      width: 200px;
      height: 100px;
      margin-top: -50px;
      background: orangered;
    }
  </style>
</head>
<body>
  <div>
      <p id="container">Tralalala</p>
  </div>
</body>
</html>
Et dans le cas où on les connait pas :
Attention à ne pas oublier le margin:0;
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

  div{
      width: 300px;
      height: 150px;
      border: 5px solid green;
      position: relative;
  }
    #container{
      position: absolute;
      top: 50%;
      width: 200px;
      height: 100px;
      margin: 0;
      background: orangered;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div>
      <p id="container">Tralalala</p>
  </div>
</body>
</html>
Et le résultat :


Et voilà, le tutoriel est terminé ! En espérant que celui-ci vous aura été utile !

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[HTML/CSS] TOUT sur le centrage horizontal et vertical" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1612
Voir le profil de l'utilisateur

Message Sujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Lun 6 Nov - 16:12

Coucou Elu'

Merci pour le partage Very Happy

Tu connais le système, comme chaque fois, on relit et ensuite on le postera Smile
Revenir en haut Aller en bas


avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Lun 6 Nov - 16:57

Coucou Agn',

Oui pas de soucis Wink.

Je vais en proposer d'autres durant les prochains jours/semaines, mon forum n'est plus actif et les tutoriels seront donc bien plus utiles ici. De plus j'ai quelques idées pour de nouveaux tutoriels alors si ça peut aider !
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1612
Voir le profil de l'utilisateur

Message Sujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Jeu 9 Nov - 17:39

Arf, dommage pour ton forum :/

En tout cas, c'est gentil de les partager ici ^^

Et n'oublie pas qu'on recrute toujours des codeurs :yeux:
Revenir en haut Aller en bas


[HTML/CSS] TOUT sur le centrage horizontal et vertical
Page 1 sur 1
 Sujets similaires
-
» mettre à l'heure d'un autre pays
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» Marcher tout en étant bourré
» ♠ Tout est relatif, seul la Vodka est Absolut
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Proposer un tutoriel+