Question 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 trucs et aucun 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>


856
2018-05-30 19:02


origine


Réponses:


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

Résumé de l'article:

Pour le navigateur CSS2, on peut utiliser display:table/display:table-cell Centrer le contenu.

Échantillon également disponible à 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 hacks pour les anciens navigateurs (IE6 / 7) en styles en utilisant # pour masquer les styles des navigateurs les plus récents:

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>


627
2018-05-30 19:29



Vous devez ajouter le line-height attribut et cet attribut doit correspondre à la hauteur de la 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 le height attribut tout à fait.

Cela ne fonctionne que pour une ligne de texte cependant, faites attention.


608
2018-02-06 19:21



Mise à jour - Voici une excellente ressource

http://howtocenterincss.com/

Centrer en CSS est une douleur dans le cul. Il semble y avoir plusieurs moyens de le faire, en fonction d'une variété de facteurs. Cela les consolide et vous donne le code dont vous avez besoin pour chaque situation.

Mise à jour - Utilisation de Flexbox

En ligne avec la mise à jour de ce post avec les dernières technologies, voici un moyen beaucoup plus facile de centrer quelque chose en utilisant flexbox. Flexbox n'est pas pris en charge dans IE9 and lower.

Voici quelques bonnes ressources:

jsfiddle avec les préfixes du navigateur

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Mise à jour - Une autre solution

C'est de la part de zerosixthree et vous permet de centrer n'importe quoi avec 6 lignes de css

Cette méthode n'est pas supportée dans IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Réponse précédente

L'approche simple et transversale du navigateur, utile en tant que liens dans la réponse marquée, est légèrement dépassée.

Comment centrer verticalement et horizontalement du texte dans une liste non ordonnée et une div sans avoir recours à des hauteurs de ligne JavaScript ou CSS. Peu importe la quantité de texte que vous avez, vous n'aurez pas besoin d'appliquer des classes spéciales à des listes spécifiques ou des divs (le code est le même pour chacun). Cela fonctionne sur tous les principaux navigateurs, y compris IE9, IE8, IE7, IE6, Firefox, Chrome, Opera et Safari. Il y a 2 feuilles de style spéciales (1 pour IE7 et une autre pour IE6) pour les aider en raison de leurs limitations css que les navigateurs modernes n'ont pas.

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

Modifier: Comme je ne me souciais pas beaucoup d'IE7 / 6 pour le dernier projet sur lequel j'ai travaillé, j'ai utilisé une version légèrement dépouillée (c'est-à-dire supprimé les trucs qui l'ont fait fonctionner dans IE7 et 6). Ça pourrait être utile pour quelqu'un d'autre ...

jsfiddle

HTML

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

Et le CSS:

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

352
2017-11-22 15:18



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


119
2017-12-12 20:25



J'utilise ce qui suit pour centrer verticalement les é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%);
}

Ceci centre le texte dans mon div au milieu vertical exact d'un 200px-haute extérieure div. Notez que vous devrez peut-être utiliser un préfixe de navigateur (par exemple -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.


104
2018-01-24 14:11



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

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

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

Remarque: Les valeurs "table en ligne", "table", "table-légende", "table-cellule", "table-colonne", "table-colonne-groupe", "table-ligne", "table-rangée-groupe ", et" inherit "ne sont pas pris en charge par IE7 et versions antérieures. IE8 nécessite un! DOCTYPE. IE9 prend en charge les valeurs.

Le tableau suivant montre également les valeurs d'affichage autorisées http://www.w3schools.com/cssref/pr_class_display.asp. J'espère que ça aide

enter image description here


35
2018-04-18 15:15



C'est ma solution préférée pour ce problème (navigateur simple et très bien supporté):

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

.vcenter{
    background:#eee;
    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">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   


17
2017-09-15 17:54



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

Il peut également fonctionner pour du texte à lignes multiples 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


7
2017-10-08 06:50