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