Est-il possible d’aligner verticalement le texte dans un div?

Le code ci-dessous (également disponible en tant que démo sur JS Fiddle ) ne positionne pas le texte au milieu, comme je le souhaiterais idéalement. Je ne trouve aucun moyen de centrer verticalement le texte dans un div, même en utilisant l’atsortingbut margin-top . Comment puis-je faire ceci?

 
1234 yet another text content that should be centered vertically
 #column-content { display: inline-block; border: 1px solid red; position:relative; } #column-content strong { color: #592102; font-size: 18px; } img { margin-top:-7px; vertical-align: middle; } 

Créez un conteneur pour votre contenu textuel, une span peut-être.

 #column-content { display: inline-block; } img { vertical-align: middle; } span { display: inline-block; vertical-align: middle; } /* for visual purposes */ #column-content { border: 1px solid red; position: relative; } 
 
1234 yet another text content that should be centered vertically

Andres Ilich a raison. Juste au cas où quelqu’un aurait raté son commentaire …

A.) Si vous avez seulement une ligne de texte:

 div { height: 200px; line-height: 200px; /* <-- this is what you must define */ } 
 
vertically centered text

Mise à jour du 10 avril 2016

Les Flexbox doivent maintenant être utilisées pour aligner verticalement (voire horizontalement) les éléments.

 
Item
Item
Item
Item

Un bon guide de flexbox peut être lu sur les astuces CSS . Merci Ben (des commentaires) pour avoir souligné, n’a pas eu le temps de mettre à jour.


Un bon gars nommé Mahendra a posté une solution très efficace ici

La classe suivante doit centrer l’élément horizontalement et verticalement sur son parent.

 .absolute-center { /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } 

C’est une vieille question, mais la réponse acceptée ne fonctionne pas pour le texte à plusieurs lignes. J’ai mis à jour le JSfiddle pour montrer l’alignement vertical du texte multiligne CSS comme expliqué ici :

 
yet another text content that should be centered vertically
#column-content { border: 1px solid red; height: 200px; width: 100px; } div { display: table-cell; vertical-align:middle; text-align: center; }

Il fonctionne également avec
dans “encore un autre …”

Essaye ça:

HTML

 
Text

CSS

 div { height: 100px; } span { height: 100px; display: table-cell; vertical-align: middle; } 

Ceci est simplement supposé fonctionner:

 #column-content { -------- margin-top:auto; margin-bottom:auto; } 

Je l’ai essayé sur votre démo.

Pour rendre la solution d’Omar (ou de Mahendra) encore plus universelle, le bloc de code relatif à FireFox doit être remplacé par le suivant:

 /* Firefox */ display:flex; justify-content:center; align-items:center; 

Le problème avec le code d’Omar, sinon opérationnel, se pose lorsque vous voulez centrer la boîte dans l’écran ou dans son ancêtre immédiat. Ce centrage se fait soit en définissant sa position

position: relative; ou position:static; (pas avec position: absolu ni fixe).

et ensuite marge: auto; ou margin-right: auto; margin-left: auto;

Dans cet environnement d’alignement au centre, la suggestion d’Omar ne fonctionne pas. Ne fonctionne pas non plus dans IE8 (encore 7,7% de part de marché). Donc, pour IE8 (et les autres navigateurs), une solution de contournement, comme celle d’autres solutions ci-dessus, devrait être envisagée.

C’est le moyen le plus simple de le faire si vous avez besoin de plusieurs lignes. Enroulez le texte de votre envoi dans un autre span et spécifiez sa hauteur avec la hauteur de line-height . L’astuce pour plusieurs lignes consiste à réinitialiser la line-height span intérieure.

 YOUR TEXT HERE 
 .textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ } 

DEMO

Bien sûr, la span extérieure pourrait être une div ou whathaveyou

Ajoutez également un alignement vertical au #column-content strong css #column-content strong :

 #column-content strong { ... vertical-align: middle; } 

Voir aussi votre exemple mis à jour .

=== MISE À JOUR ===

Avec une scope autour de l’autre texte et un autre alignement vertical:

html:

 ... yet another text content that should be centered vertically ... 

css:

 #column-content span { vertical-align: middle; } 

Voir aussi l’ exemple suivant .

Je sais que c’est complètement stupide et que normalement vous ne devriez pas utiliser de tables lorsque vous ne créez pas de tables, mais: les cellules de la table peuvent aligner plusieurs lignes de texte centrées verticalement et même le faire par défaut. Donc, une solution qui fonctionne très bien pourrait être quelque chose comme ceci:

html:

 
lorem ipsum ...

css: (faire en sorte que l’élément du tableau corresponde toujours à la case div)

 .box { /* for example */ height: 300px; } .textalignmiddle { width: 100%; height: 100%; } 

voir ici: http://www.cssdesk.com/LzpeV