Centrage

Centrer des éléments en "inline"

Pour rappel, un élément "inline", pour "display:inline" en CSS, est un élément qui ne va occuper que la place nécessaire sur son axe horizontal

Exemples d'éléments inline :

Les balises "span"
Les balises "a"
Les balises "img"

Pour centrer un élément inline, nous utiliserons text-align:center. Mais attention, text-align:center doit se positionner sur la balise qui contient votre élément "inline"

Center des éléments en “block”

Pour rappel, un élément “block” pour “display:block” en CSS, est un élément qui va occuper 100% de largeur disponible de son parent. (Par défaut donc, 100% du navigateur).

Exemples d’éléments block :

Les balises “div”
Les balises “ul”, ou “ol”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .center-inline {
        text-align: center;
      }

      .center-block {
        margin-left: auto;
        margin-right: auto;
        background: rgb(138, 138, 243);
      }

      .square {
        background: rgb(138, 138, 243);
        width: 300px;
        height: 300px;
      }
      .small {
        max-width: 400px;
      }

      body {
        font-size: 2rem;
      }

      .sections {
        background: black;
        background: #e8e3e3;
        padding: 2rem;
        margin-bottom: 4rem;
      }
    </style>
  </head>
  <body>
    <h1>Centrage</h1>
    <h2>Des éléments "inline"</h2>

    <div class="sections">
      <h3>Exemple avec un lien</h3>
      <p class="center-inline">
        <a href="#">Ceci est un lien</a>
      </p>

      <h3>Exemple avec du texte dans un paragraphe</h3>
      <p class="center-inline">Ceci est un texte dans un paragraphe</p>
      <h3>Exemple avec une image</h3>
      <p class="center-inline">
        <img class="small" src="<https://picsum.photos/200>" />
      </p>
    </div>
    <h2>Des éléments "block"</h2>

    <div class="sections">
      <h3>Un paragraphe avec un taille prédéfinie</h3>
      <p class="small center-block">Ceci est un texte dans un paragraphe.</p>

      <h3>
        Des éléments inline centrés, dans des éléments block, eux-mêmes centrés
      </h3>

      <p class="small center-inline center-block">
        Ceci est un texte dans un paragraphe.
      </p>

      <h3>Une div avec une taille prédéfinie</h3>
      <div class="square center-block"></div>
    </div>
  </body>
</html>