web-dev-qa-db-fra.com

Comment aligner verticalement du texte dans une div?

J'essaie de trouver le moyen le plus efficace d'aligner le texte avec un div. J'ai essayé quelques choses et aucune ne semble fonctionner.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
htmlcssvertical-alignment
1063
shinjuo

Centrage vertical en CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Résumé de l'article:

Pour un navigateur CSS 2, vous pouvez utiliser display:table/display:table-cell pour centrer le contenu.

Un échantillon est également disponible sur JSFiddle :

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Il est possible de fusionner les styles des anciens navigateurs (Internet Explorer 6/7) en utilisant # pour masquer les styles des nouveaux navigateurs:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>
735
Robert Harvey

Vous devez ajouter l'attribut line-height et cet attribut doit correspondre à la hauteur de div. Dans ton cas:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

En fait, vous pourriez probablement supprimer complètement l'attribut height.

Cela ne fonctionne que pour ne ligne de texte si, alors soyez prudent.

703
David

Voici une excellente ressource

De http://howtocenterincss.com/ :

Centrer en CSS est une douleur dans le cul. Il semble exister de nombreuses façons de le faire, en fonction de divers facteurs. Cela les consolide et vous donne le code dont vous avez besoin pour chaque situation.

Utiliser Flexbox

En gardant ce message à jour avec les dernières technologies, voici un moyen beaucoup plus simple de centrer quelque chose avec Flexbox. Flexbox n'est pas pris en charge dans Internet Explorer 9 et versions antérieures .

Voici quelques bonnes ressources:

JSFiddle avec les préfixes du navigateur

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Une autre solution

Ceci est de zerosixthree et vous permet de centrer n'importe quoi avec six lignes de CSS

Cette méthode n'est pas prise en charge dans Internet Explorer 8 et versions antérieures .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Réponse précédente

Une approche simple et multi-navigateurs, utile car les liens dans la réponse marquée sont légèrement obsolètes.

Comment centrer le texte verticalement et horizontalement dans une liste non ordonnée et dans une div sans recourir à JavaScript ou aux hauteurs de ligne CSS . Peu importe la quantité de texte que vous avez, vous n'aurez pas à appliquer de classes spéciales à des listes ou à des divs spécifiques (le code est le même pour chaque). Cela fonctionne sur tous les principaux navigateurs, y compris Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera et Safari. Il existe deux feuilles de style spéciales (une pour Internet Explorer 7 et une autre pour Internet Explorer 6) pour les aider en raison de leurs limitations CSS que les navigateurs modernes ne possèdent pas.

Andy Howard - Comment centrer le texte verticalement et horizontalement dans une liste non divisée ou div

Comme je n’aimais pas beaucoup Internet Explorer 7/6 pour le dernier projet sur lequel j’ai travaillé, j’en ai utilisé une version légèrement simplifiée (c’est-à-dire que j'ai supprimé les éléments qui le faisaient fonctionner dans Internet Explorer 7 et 6). Cela pourrait être utile pour quelqu'un d'autre ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}
<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>
428
Adam Tomat

C'est facile avec display: flex. Avec la méthode suivante, le texte de la div sera centré verticalement:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Et si vous voulez, horizontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Vous devez voir la version du navigateur dont vous avez besoin. dans les anciennes versions, le code ne fonctionnait pas.

173
Raul Fernandez Marques

J'utilise ce qui suit pour centrer verticalement facilement des éléments aléatoires:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Ceci centre le texte dans mon div sur le milieu vertical exact d’un extérieur de 200px-haut div. Notez que vous devrez peut-être utiliser un préfixe de navigateur (tel que -webkit- dans mon cas) pour que cela fonctionne avec votre navigateur.

Cela fonctionne non seulement pour le texte, mais aussi pour d'autres éléments.

108
Stefan van den Akker

Vous pouvez faire cela en réglant l'affichage sur 'table-cellule' et en appliquant un vertical-align: middle;:

    {
        display: table-cell;
        vertical-align: middle;
    }

Ce n'est cependant pas supporté par toutes les versions d'Internet Explorer selon cet extrait que j'ai copié de http://www.w3schools.com/cssref/pr_class_display.asp sans autorisation.

Remarque: Les valeurs "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" et "inherit" ne sont pas pris en charge par Internet Explorer 7 et les versions antérieures. Internet Explorer 8 nécessite un! DOCTYPE. Internet Explorer 9 prend en charge les valeurs.

Le tableau suivant indique les valeurs d'affichage autorisées également à partir de http://www.w3schools.com/cssref/pr_class_display.asp .

Enter image description here

38
Shadrack B. Orina

Ces jours-ci (nous n’avons plus besoin d’Internet Explorer 6-7-8), j’utiliserais simplement CSS display: table pour ce problème (ou display: flex).

Pour les anciens navigateurs:

Table:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>

Fléchir:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}
<div class="vcenter">
  <p>This is my text</p>
</div>

C’est (en fait, ma) solution préférée pour ce problème (simple et très bien pris en charge par le navigateur):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>
32
Toni Michel Caubet

Essayez ceci en ajoutant à la div parente:

display: flex;
align-items: center;
9
Kerim092

Voici une solution qui fonctionne le mieux pour une seule ligne de texte.

Cela peut également fonctionner pour un texte multiligne avec quelques ajustements si le nombre de lignes est connu.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Voici un JSFiddle .

8
Craig
<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>
8
Nikit Barochiya

Vous pouvez aligner le texte central verticalement à l'intérieur d'une div à l'aide de Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Vous pouvez en apprendre plus à ce sujet sur Guide complet de Flexbox.

7
Cyan Baltazar

Vérifiez cette solution simple:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

6
Davors

Il s’agit de la solution la plus propre que j’ai trouvée (Internet Explorer 9+) et ajoute un correctif pour le problème de "désactivation par 0,5 pixel" en utilisant transform-style que les autres réponses avaient omis.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Source: Alignez verticalement quoi que ce soit avec seulement 3 lignes de CSS

5
Justin

Il existe un moyen plus simple d'aligner verticalement le contenu sans avoir recours à table/table-cellule:

http://jsfiddle.net/bBW5w/1/

J'y ai ajouté un div invisible (width = 0) qui assume toute la hauteur du conteneur.

Cela semble fonctionner dans Internet Explorer et Firefox (dernières versions). Je n'ai pas vérifié avec d'autres navigateurs

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Et bien sûr le CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}
5
Earl Hickey

Une solution simple à un élément de non-connaissance des valeurs:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
4
dimitar

Utilisation:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}
<div class="container">
    <h1>Vertical align text</h1>
</div>

Avec cette astuce, vous pouvez aligner n'importe quoi si vous ne voulez pas que le centre ajoute "left: 0" pour aligner left.

3
Sanjeet kumar

Selon la réponse d'Adam Tomat, un JSFiddle exemple a été mis au point pour aligner le texte div :

<div class="cells-block">    
    text<br/>in the block   
</div>

en utilisant display: flex en CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

avec un autre exemple et quelques explications dans n article de blog .

3
Leon Rom

Marge auto sur un élément de la grille.

De la même manière que Flexbox, l’application de margin auto sur un élément de la grille le centre sur les deux axes:

.container {
  display: grid;
}
.element {
  margin: auto;
}
2
Sulaymon Hursanov

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }
2
ankit sigdel

En utilisant flex, faites attention aux différences de rendu des navigateurs.

Cela fonctionne bien à la fois pour Chrome et Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}
<div class="outer"><div class="inner">Active Tasks</div></div>

Comparez avec celui-ci qui ne fonctionne qu'avec Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}
<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>
2
Roman Pokrovskij

Ceci est une autre variante de div dans un modèle div utilisant calc() en CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Cela fonctionne parce que:

  • position:absolute pour un placement précis du div dans un div
  • nous savons la hauteur du div intérieur parce que nous l'avons mis à 20px.
  • calc(50% - 10px) pour 50% - la moitié de la hauteur pour centrer le div intérieur
1
Stephen Quan

Cela fonctionne bien:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Toupet

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Sans et avec la balise d'image <mat-icon> (qui est une police).

1
V. Kalyuzhnyu

L’utilisation de la grille CSS s’est faite pour moi:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}
<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>
0
ezzato

Vous pouvez utiliser css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
0
Nidhin Joseph

Essayez d'intégrer un élément de table.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>
0
mike

Hmm, il y a évidemment plusieurs façons de résoudre ce problème.

Mais j'ai un <div> qui est positionné de manière absolue, height:100% (en fait, top:0;bottom:0 et largeur fixe) et display:table-cell n'a pas fonctionné pour centrer le texte verticalement. Ma solution nécessitait un élément d'envergure interne, mais je constate que nombre des autres solutions le sont aussi, je pourrais donc aussi l'ajouter:

Mon conteneur est un .label et je veux que le nombre y soit centré verticalement. Je l'ai fait en positionnant absolument sur top:50% et en plaçant line-height:0

<div class="label"><span>1.</span></div>

Et le CSS est comme suit:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Voyez-le en action: http://jsfiddle.net/jcward/7gMLx/

0
Jeff Ward