Comment aligner verticalement du texte dans une div?

J'essaie de trouver le moyen le plus efficace d'aligner du texte sur 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>

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

Résumé de l'article:

Pour un navigateur CSS 2, on peut utiliser display:table/ display:table-cellpour 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 des hacks pour les anciens navigateurs (Internet Explorer 6/7) dans des styles 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>

Vous devez ajouter l' line-heightattribut et cet attribut doit correspondre à la hauteur du 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 heightcomplètement l' attribut.

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

Voici une excellente ressource

Depuis http://howtocenterincss.com/ :

Centrer en CSS est une douleur dans le cul. Il semble y avoir des millions de 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.

Utilisation de Flexbox

Conformément à la mise à jour de ce message avec les dernières technologies, voici un moyen beaucoup plus facile de centrer quelque chose à l'aide de Flexbox. Flexbox n'est pas pris en charge dans Internet Explorer 9 et versions antérieures .

Voici quelques excellentes ressources:

• Un guide sur Flexbox
• Eléments de centrage avec Flexbox
• Syntaxe Internet Explorer 10 pour Flexbox
• Prise en charge de Flexbox

JSFiddle avec préfixes de 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

Cela vient de zéro zéro et vous permet de centrer quoi que ce soit 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-navigateur, utile car les liens dans la réponse marquée sont légèrement dépassés.

Comment centrer verticalement et horizontalement du texte dans une liste non ordonnée et une div sans avoir recours aux hauteurs de ligne JavaScript ou CSS . Peu importe la quantité de texte dont vous disposez, vous n'aurez pas à appliquer de classes spéciales à des listes ou des divisions spécifiques (le code est le même pour chacune). Cela fonctionne sur tous les principaux navigateurs, notamment 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 n'ont pas.

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

Comme je ne me souciais pas beaucoup d'Internet Explorer 7/6 pour le dernier projet sur lequel j'ai travaillé, j'ai utilisé une version légèrement allégée (c'est-à-dire 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>

C'est facile avec display: flex. Avec la méthode suivante, le texte dans le divsera 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 fonctionne pas.

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

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%);
}

Cela centre le texte dans ma divau milieu vertical exact d'un extérieur de 200 pixels de haut div. Notez que vous devrez peut-être utiliser un préfixe de navigateur (comme -webkit-dans mon cas) pour que cela fonctionne pour votre navigateur.

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

Vous pouvez le faire en définissant l'affichage sur «cellule de tableau» et en appliquant vertical-align: middle;:

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

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

Remarque: Les valeurs "table-en-ligne", "table", "légende-table", "cellule-table", "colonne-table", "groupe-colonne-table", "ligne-table", "ligne-table" -group "et" inherit "ne sont pas pris en charge par Internet Explorer 7 et versions antérieures. Internet Explorer 8 nécessite un! DOCTYPE. Internet Explorer 9 prend en charge les valeurs.

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

De nos jours (nous n'avons plus besoin d'Internet Explorer 6-7-8), j'utiliserais simplement CSS display: tablepour ce problème (ou display: flex).

Pour les navigateurs plus anciens:

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, était) ma solution préférée pour ce problème (navigateur simple et très bien pris en charge):

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>

Essayez ceci, ajoutez le parent div:

display: flex;
align-items: center;

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

Il peut également fonctionner pour le texte à plusieurs lignes 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 .

<!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>

Vous pouvez aligner le texte central verticalement à l'intérieur d'un 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 savoir plus à ce sujet dans Un guide complet de Flexbox .

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

Il existe un moyen plus simple d'aligner verticalement le contenu sans recourir au tableau / tableau-cellule:

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

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

Il 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%;
}

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 "off by .5 pixel" en utilisant transform-styleque d'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: aligner verticalement n'importe quoi avec seulement 3 lignes de CSS

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%);
}

Selon la réponse d'Adam Tomat, un exemple JSFiddle a été préparé pour aligner le texte en 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 un article de blog .

Marge automatique sur un élément de grille.

De manière similaire à Flexbox, l'application automatique de la marge sur un élément de grille le centre sur les deux axes:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox a parfaitement fonctionné pour moi, centrant plusieurs éléments à l'intérieur de la division parent horizontalement et verticalement.

Code HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

Code CSS: le
code ci-dessous empile tous les éléments à l'intérieur de parent-div dans une colonne, en centrant les éléments horizontalement et verticalement. J'ai utilisé le child-div pour garder les deux éléments d'ancrage sur la même ligne (ligne). Sans child-div, les trois éléments (Anchor, Anchor & Paragraph) sont empilés dans la colonne parent-div les uns sur les autres. Ici, seul child-div est empilé dans la colonne parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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 le faire ajouter au centre "gauche: 0" pour aligner à gauche.

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;
 }

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

Cela fonctionne bien 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>

Il s'agit d'une autre variante de divdans un divmodèle 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, car:

• position:absolutepour un placement précis de l' divintérieur d'undiv
• nous connaissons la hauteur de l'intérieur divparce que nous la réglons sur 20px.
• calc(50% - 10px)pour 50% - la moitié de la hauteur pour centrer l'intérieurdiv

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 image <mat-icon>(qui est une police).

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

Mais j'ai un <div>qui est positionné absolument, height:100%(en fait, top:0;bottom:0et à largeur fixe) et display:table-celln'a tout simplement pas fonctionné pour centrer le texte verticalement. Ma solution nécessitait un élément span interne, mais je vois que la plupart des autres solutions le font aussi, donc je pourrais aussi bien l'ajouter:

Mon conteneur est un .labelet je veux que le nombre soit centré verticalement. Je l' ai fait en positionnant absolument à top:50%et la mise enline-height:0

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

Et le CSS est le suivant:

.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/

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>

L'utilisation de la grille CSS l'a fait 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>

Essayez d'incorporer un élément de table.

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

Il existe plusieurs astuces pour afficher du contenu ou une image au centre d'une div. Certaines des réponses sont vraiment agréables et je suis entièrement d'accord avec celles-ci également.

Centrage absolu horizontal et vertical en CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Il existe plus de 10 techniques avec des exemples . Maintenant, c'est à vous que vous préférez.

Sans aucun doute, display:table; display:table-Cellc'est une meilleure astuce.

Quelques bonnes astuces sont les suivantes:

Astuce 1 - En utilisant display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Code CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Astuce 2 - En utilisant display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Code CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Astuce 3 - En utilisant position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Ajoutez cette classe à l'élément qui contient les éléments que vous souhaitez aligner verticalement

Si vous devez utiliser avec la min-heightpropriété, vous devez ajouter ce CSS sur:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}