Comment aligner verticalement le texte dans un div?

J’essaie de trouver le moyen le plus efficace d’aligner le texte avec un div. J’ai essayé quelques petites 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; } 
 
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.

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 pour centrer le contenu.

Échantillon également disponible chez JSFiddle :

 div { border:1px solid green;} 
 
everything is vertically centered in modern IE8+ and others.

Vous devez append l’atsortingbut line-height et cet atsortingbut doit correspondre à la hauteur du div . Dans ton cas:

 .center { height: 309px; line-height: 309px; /* same as height! */ } 
 
A single line.

Mise à jour – Voici une excellente ressource

http://howtocenterincss.com/

Le centrage en CSS est une douleur dans le cul. Il semble y avoir un moyen d’y parvenir en fonction de divers facteurs. Cela les consolide et vous donne le code dont vous avez besoin pour chaque situation.

Mise à jour – Utilisation de Flexbox

Parallèlement à la mise à jour de cette publication avec la dernière technologie, voici un moyen beaucoup plus simple de centrer quelque chose avec Flexbox. Flexbox n’est pas pris en charge dans IE9 and lower .

Voici quelques excellentes ressources:

  • Un guide de flexbox
  • Eléments de centrage avec flexbox
  • IE10 syntaxe pour flexbox
  • Prise en charge de Flexbox

jsfiddle avec les préfixes du navigateur

HTML

 
  • Some Text

  • A bit more text that goes on 2 lines

  • Even more text that demonstrates how lines can span multiple lines

CSS

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

Mise à jour – Une autre solution

Ceci est de zerosixthree et vous permet de centrer n’importe quoi avec 6 lignes de css

Cette méthode n’est pas prise en charge dans IE8 and lower

jsfiddle

HTML

 
  • Some Text

  • A bit more text that goes on 2 lines

  • Even more text that demonstrates how lines can span multiple lines

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

Approche de navigateur simple et croisée, utile car les liens dans la réponse marquée sont légèrement obsolètes.

Comment centrer verticalement et horizontalement le texte à la fois dans une liste non ordonnée et dans un div sans avoir recours à des lignes de hauteur JavaScript ou CSS . Peu importe la quantité de texte que vous avez, vous n’aurez pas à appliquer de classes spéciales à des listes ou divs spécifiques (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 ou une div non ordonnée

Edit: Comme je ne me souciais pas beaucoup de 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 enlevé les éléments qui la faisaient fonctionner dans IE7 et 6). Peut-être utile pour quelqu’un d’autre …

jsfiddle

HTML

 

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

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

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

J’utilise les éléments suivants pour centrer verticalement des éléments aléatoires facilement:

HTML:

 
This is vertically aligned text within a div

CSS:

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

Cela centre le texte dans mon div au milieu vertical exact d’une div externe de 200px-haut. 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 réglant l’affichage sur “table-cell” et en appliquant un alignement vertical: middle;

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

Cela n’est cependant pas pris en charge par toutes les versions d’Internet Explorer, conformément à 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 supportés par IE7 et les versions antérieures. IE8 nécessite un! DOCTYPE. IE9 prend en charge les valeurs.

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

entrer la description de l'image ici

Ceci est 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; 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%; } 
 

This is my Text

This is my Text
Text

This is my Text
Text
Text

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

Il peut également fonctionner avec du texte multi-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

       

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vérifiez cette solution simple:

HTML

 

I'm a vertically centered element

CSS

 .block-title { float:left; display:block; width:100%; height:88px } .block-title h3 { display:table-cell; vertical-align:middle; height:inherit } 

JSFiddle

Vous pouvez aligner le texte central verticalement à l’intérieur d’un div en utilisant la boîte flexible.

 

This is the testimonial text.

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

Vous pouvez en apprendre plus à ce sujet sur ce lien: https://css-sortingcks.com/snippets/css/a-guide-to-flexbox/

Il existe un moyen plus simple d’aligner verticalement le contenu sans recourir à la table / à la table:

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

J’ai ajouté un div invisible (width = 0) qui prend toute la hauteur du conteneur.

Il semble fonctionner dans IE et FF (dernières versions), n’a pas vérifié avec les autres navigateurs

  
everything is vertically centered in modern IE8+ and others.

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

C’est la solution la plus propre que j’ai trouvée (IE9 +) et ajoute un correctif pour le problème “off by .5 pixel” en utilisant transform-style que 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: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Solution simple à un élément de ne pas connaître les valeurs

HTML

 
whatever

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

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

Cela fonctionne bien pour Chrome et IE:

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

Selon Adam Tomat, il a été préparé un exemple jsfiddle pour aligner le texte en div

 
text
in the block

affichage à l’ usage : 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 sur le blog .

HTML

 
Vertical contents goes here

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

Pas une seule réponse ne m’a aidé, essayez ceci, ajoutez le div parent:

 display:flex; align-items:center; 

Ceci est une autre variante du div dans un motif div utilisant calc() dans CSS.

 
Text in outer div.
Text in inner div.

Cela fonctionne, car:

  • position:absolute pour un placement précis du div dans un div
  • nous connaissons la hauteur de la div interne car nous la 20px à 20px .
  • calc(50% - 10px) pour 50% – la moitié de la hauteur pour centrer la div interne

Fonctionne bien

HTML

 
Some text info_outline

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 (qui est une police)

  h1{ margin:0; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); } .container { height: 200px; width: 500px; position: relative; border: 1px solid #eee; } 
  

vertical align text

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

 
copenhagen

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

Mais j’ai un

qui est positionné absolument, height:100% (en fait, top:0;bottom:0 et width) et display:table-cell ne fonctionne pas pour centrer le texte verticalement. Ma solution nécessitait un élément de scope interne, mais je vois que de nombreuses autres solutions le font également, alors autant le rappend:

Mon conteneur est un .label et je veux que le nombre soit centré verticalement. Je l’ai fait en positionnant absolument en top:50% et réglage line-height:0

 
1.

Et le CSS est comme suit:

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

Voir en action: http://jsfiddle.net/jcward/7gMLx/

Utiliser la grid 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; } 
Content

Il y a plusieurs astuces pour afficher le contenu / l’image au centre de Div. Certaines réponses sont vraiment agréables et je suis tout à fait d’accord avec elles.

Centrage horizontal et vertical absolu 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 de choisir.

Sans doute, display:table; display:table-Cell display:table; display:table-Cell est un meilleur truc.

Quelques bons tours suivent:

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

HTML

 
CONTENT

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

 
CONTENT

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 IE9+ */ } 

Astuce 3 – En utilisant la position:relative;position:absolute

 

ABSOLUTE CENTER,
WITHIN CONTAINER.

This box is absolutely centered, horizontally and vertically, within its container

CSS:

 .vertical { display: table-caption; } 

Ajoutez cette classe à l’élément contenant les éléments à aligner verticalement

Si vous devez utiliser la propriété min-height , vous devez append ce CSS sur:

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

Aussi simple que cela, des docs :

La propriété CSS vertical-align spécifie l’alignement vertical d’une zone en ligne ou d’une cellule de tableau.

 #HTML 
Text
#CSS span { vertical-align: middle; }