Comment Centrer un Texte Verticalement en CSS

  1. Propriété CSS vertical-align
  2. Flexbox CSS
  3. CSS Table Display
  4. Propriété CSS line-height
  5. Paddings égaux supérieure et inférieure
  6. Absolute Positioning et Negative Margin
  7. Absolute Positioning et Stretching
  8. Propriété Transform
  9. Floater div

Il y a quelques moyens de centrer verticalement un texte en CSS, qui sont facile à utiliser.

Utilisez la propriété CSS vertical-align

La propriété vertical-align est utilisé pour centrer verticalement des éléments en ligne.

Les valeurs pour vertical-align aligne l’élément relativement à son élément parent:

  • Les valeurs qui sont relatives à ligne, aligne verticalement l’élément relativement à la ligne entière..
  • Les valeurs pour les cellules de table sont relatives à table-height-algorithme, qui souvent signifie la hauteur de rangée.
Cela n’exécute pas avec les anciennes versions de IE sans une solution. La solution pour vous est ajouter un enfant {display: inline-block}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style type="text/css">
      div {
        display: table-cell;
        width: 250px;
        height: 200px;
        padding: 10px;
        border: 3px dashed #1c87c9;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div>Texte aligné verticalement</div>
  </body>
</html>

Utiliser CSS Flexbox

Avec Flexbox, vous pouvez aligner des éléments verticalement (ou horizontalement) avec les propriétés align-items, align-self, et justify-content.

Lisez notre Flexbox Guide pour apprener comment vous pouvez créer les mises en page (layouts) flexibles, optimisés pour plusieurs appareils.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      section {
        display: flex;
        width: 50%;
        height: 200px;
        margin: auto;
        border-radius: 10px;
        border: 3px dashed #1c87c9;
      }
      p {
        margin: auto; /* Important */
        text-align: center;
      }
    </style>
  </head>
  <body>
    <section>
      <p>Je suis centré avec Flexbox!</p>
    </section>
  </body>
</html>

flexbox layout flexbox layout

Utiliser CSS display:table

Dans cette méthode, nous allons afficher les éléments comme un table et cellule de table, et centrer le contenu via la propriété vertical-align.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #parent {
        display: table;
        width: 100%;
        height: 200px;
        border: 3px dashed #1c87c9;
        text-align: center;
      }
      #child {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">Je suis centré verticalement.</div>
    </div>
  </body>
</html>
Cela n’exécute pas avec les anciennes versions de IE. Ajouter un enfant {display: inline-block}

Utiliser la propriété line-height

Cette méthode peut être utilisée pour centrer verticalement une seule ligne de texte. Ajoutez la propriété line-height à l’élément, contenant le texte qui est plus grand que sa taille de police. Par défaut, on va ajouter les espaces égales en haute n en bas de texte, et vous allez avoir un texte centré verticalement.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
        height: 90px;
        line-height: 90px;
        text-align: center;
        border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>Je suis centré verticalement</p>
  </body>
</html>

La méthode suivante exécute pour une seule et plusieurs lignes de texte, mais elle demande un conteneur de la hauteur fixée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        display: inline-block;
        width: 100%;
        height: 200px;
        vertical-align: middle;
        line-height: 200px;
        text-align: center;
        border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Je suis centré verticalement</div>
  </body>
</html>

Définir des Paddings égaux supérieure et inférieure

Dans cette méthode, on définit des rembourrages (paddings) supérieure et inférieure de l’élément parent afin qu’ils soient égaux.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .center {
        padding: 10% 0;
        border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <p>Je suis centré verticalement.</p>
    </div>
  </body>
</html>

Quand vous définissez padding: utilisez % pour les aider à grandir dynamiquement. Cette méthode demande quelques calculassions pour comprendre quelles valeurs vous devez placer en haut et en bas ; pour qu’ils grandissent dynamiquement. Si vous définissez height: relative; calcul ne sera pas requis.

Définir position: absolute et margin: négative

Cette méthode est utilisée avec des éléments de bloc. N’oubliez pas définir la hauteur de l’élément que vous voulez centrer.

  1. Définir #parent {position: relative} et enfant {position: absolute;}
  2. Définir top: 50%; et left: 50%; pour centrer un angle gauche de l’enfant <div>.
  3. Définir l’enfant <div> {width:} et {height:} afin qu’il soit déplacé à haut et gauche.
  4. Donner une marge négative: cela divise en deux la hauteur et la largeur.

Exemple

Si le contenu devient trop grand, il peut disparaître visuellement.

Définir absolute positioning et stretching

Dans cette méthode, on donne l’ordre à l’ordinateur à définir automatiquement les marges de l’élément enfant pour qu’ils soient égales.

  1. Définir parent {position: relative} et child {position: absolute;}
  2. Définir child {top: 0; bottom: 0; left:0; right:0;}
  3. Définir 4 margin: auto; pour que toutes les marges soient egales et les résultats de
    enfant soient centrés verticalement et horizontalement.

Exemple

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 30%;
  margin: -15% 0 0 -25%;
}
Cette méthode n'exécute pas en IE7.

Définir la propriété transform

Quand on a position: absolute; left: 50%; top: 50%; les calculs sont faits à partir de coin supérieure gauche. Pour placer le texte au centre, on doit le “move” -50% à gauche et 50% en haut en définissant transform: translate (-50%;-50%).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .parent {
        position: relative;
        width: 100%;
        height: 220px;
        background: #1faadb;
        color: #fff;
      }
      .child_1,
      .child_2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 90px;
        padding: 5px;
        background: #8ebf42;
        text-align: center;
      }
      .child_1 {
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child_1">Texte centré verticalement</div>
    </div>
    <br />
    <div class="parent">
      <div class="child_2">Texte non centré</div>
    </div>
  </body>
</html>

Utiliser floater div

Cette méthode demande un div vide, qui est floated.

Cette méthode demande un div vide.

  1. Float: flotter <div> à gauche ou à droite.
  2. Définir Height: 50%;
  3. Un élément enfant vide.
  4. Nettoyer child <div> en utilisant clear: property

Vous devez apporter l’élément enfant d’un montant égal à moitié de la hauteur. Pour faire cela, définissez un nombre négatif pour margin-bottom: sur le floater <div>

Exemple

#parent {
  height: 200px;
}
#floater {
  float: left;
  width: 100%;
  height: 50%;
  margin-bottom: -50px;
  outline: 2px solid #1c87c9;
}
#child {
  clear: both;
  height: 100px;
  outline: 2px solid #8ebf42;
}
N’oubliez pas d’avoir un div vide et définir la hauteur de l’élément enfant.