Comment centrer le texte verticalement avec CSS?
J'ai un élément div qui contient du texte et je veux aligner le contenu de ce div verticalement.
Voici mon style div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>Quelle est la meilleure façon de procéder?
Vous pouvez essayer cette approche de base:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello World!
</div>Toutefois, cela ne fonctionne que pour une seule ligne de texte, car nous définissons la hauteur de la ligne sur la même hauteur que l'élément contenant la boîte.
Une approche plus polyvalente
C'est un autre moyen d'aligner le texte verticalement. Cette solution fonctionnera pour une seule ligne et plusieurs lignes de texte, mais nécessite toujours un conteneur à hauteur fixe:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>Le CSS redimensionne simplement le <div>, le centre vertical aligne le <span> en définissant la hauteur de ligne de <div> sur sa hauteur et fait de <span> un bloc en ligne avec vertical-align: middle. Ensuite, il rétablit la hauteur normale de la ligne pour le <span>, afin que son contenu se répande naturellement dans le bloc.
Simuler l'affichage de la table
Et voici une autre option, qui ne fonctionnera peut-être pas sur les versions antérieures les navigateurs qui ne prennent pas en charge display: table et display: table-cell (essentiellement Internet Explorer 7). En utilisant CSS, nous simulons le comportement de la table (puisque les tables prennent en charge l'alignement vertical), et le code HTML est identique à celui du deuxième exemple:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>Utiliser le positionnement absolu
Cette technique utilise un élément positionné de manière absolue en positionnant le haut, le bas, la gauche et la droite à 0. Elle est décrite plus en détail dans un article de Smashing Magazine, Centrage horizontal et vertical absolu dans CSS.
Une autre façon (pas encore mentionnée ici) est d'utiliser Flexbox .
Il suffit d’ajouter le code suivant à l’élément conteneur :
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
démo Flexbox 1
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>Sinon, au lieu d'aligner le contenu via le conteneur , flexbox peut également centrer l'élément a flex avec un marge automatique lorsqu'il n'y a qu'un seul élément flex dans le conteneur flex (comme dans l'exemple donné dans la question ci-dessus) .
Donc, pour centrer l’élément flex à la fois horizontalement et verticalement, il suffit de le définir avec margin:auto
Flexbox Demo 2
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
}
.box span {
margin: auto;
}<div class="box">
<span>margin:auto on a flex item centers it both horizontally and vertically</span>
</div> NB: Tout ce qui précède s’applique aux éléments de centrage lorsqu’ils sont disposés en rangées horizontales . C'est également le comportement par défaut, car par défaut, la valeur de flex-direction est row. Si, toutefois, les éléments flex doivent être disposés dans colonnes verticales , alors flex-direction: column doit être défini sur le conteneur pour définir le paramètre principal. axe en tant que colonne et les propriétés justify-content et align-items fonctionnent maintenant dans l’inverse avec justify-content: center centré verticalement et align-items: center centré horizontalement)
flex-direction: column démo
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 18px;
font-style: oblique;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: center;
/* vertically aligns items */
align-items: center;
/* horizontally aligns items */
}
p {
margin: 5px;
}<div class="box">
<p>
When flex-direction is column...
</p>
<p>
"justify-content: center" - vertically aligns
</p>
<p>
"align-items: center" - horizontally aligns
</p>
</div>Un bon point de départ pour Flexbox pour visualiser certaines de ses fonctionnalités et obtenir la syntaxe permettant une prise en charge optimale du navigateur est flexyboxes
En outre, la prise en charge du navigateur est actuellement très bonne: caniuse
Pour la compatibilité entre navigateurs pour display: flex et align-items, vous pouvez utiliser les éléments suivants:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Vous pouvez facilement le faire en ajoutant le code CSS suivant:
display: table-cell;
vertical-align: middle;
Cela signifie que votre CSS ressemble finalement à ceci:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}<div id="box">
Some text
</div>Pour référence et pour ajouter une réponse plus simple:
CSS pur:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Ou en tant que SASS/SCSS Mixin:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Utiliser par:
.class-to-center {
@include vertical-align;
}
Sur le blog de Sebastian Ekström Aligner verticalement n'importe quoi avec seulement 3 lignes de CSS:
Cette méthode peut rendre les éléments flous du fait qu’ils sont placés sur un "demi-pixel". Une solution à cela consiste à définir son élément parent sur preserve-3d. Comme suit:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Nous vivons en 2015+ et Flex Box est pris en charge par tous les principaux navigateurs modernes.
Ce sera la façon dont les sites Web sont créés à partir de maintenant.
Apprenez-le!
Tout le crédit va à ce propriétaire de lien @Sebastian Ekström Link ; s'il vous plaît passer par là. Voir en action codepen . En lisant l'article ci-dessus, j'ai également créé n violon de démonstration .
Avec seulement trois lignes de CSS (à l'exclusion des préfixes de vendeurs), nous pouvons le faire à l'aide d'une transformation: translateY centre verticalement tout ce que nous voulons, même si nous ne connaissons pas sa hauteur.
La propriété CSS transform est généralement utilisée pour la rotation et la mise à l'échelle d'éléments, mais avec sa fonction translateY, il est désormais possible d'aligner des éléments verticalement. Généralement, cela doit être fait avec un positionnement absolu ou des hauteurs de ligne, mais cela vous oblige à connaître la hauteur de l'élément ou à ne travailler qu'avec du texte à une seule ligne, etc.
Donc, pour ce faire, nous écrivons:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
C’est tout ce dont vous avez besoin. Il s’agit d’une technique similaire à la méthode de la position absolue, mais avec l’avantage de ne pas définir de hauteur sur l’élément ni sur la propriété de position du parent. Cela fonctionne directement, même dans Internet Explorer 9 !
Pour le rendre encore plus simple, nous pouvons l’écrire sous forme de mix avec ses préfixes de fournisseur.
Les Flexbox introduites dans CSS3 sont la solution:
/* Important */
section {
display: flex;
display: -webkit-flex;
}
p {
/* Key Part */
margin: auto;
}
/* Unimportant, coloring and UI */
section {
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
text-align: center;
font-family: Calibri;
background-color: yellow;
border-radius: 20px;
padding: 15px;
}<section>
<p>
I'm centered!<br/>
Flexboxes are great!
</p>
</section>Astuce: Si vous souhaitez centrer le texte, remplacez la ligne au-dessus de laquelle figure la mention "Pièce clé" par l'une de ces lignes:
1) uniquement verticalement:
margin: auto 0;
2) seulement horizontalement:
margin: 0 auto;
Comme je l'ai remarqué, cette astuce fonctionne avec les grilles (c'est-à-dire display: grid), également.
approche flexible
div {
width: 250px;
min-height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #123456;
margin-bottom: 5px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet.</span>
</div>
<div>La solution acceptée comme réponse est parfaite pour utiliser line-height de la même manière que la hauteur de div, mais cette solution ne fonctionne pas parfaitement lorsque le texte est enveloppé OR est composé de deux lignes.
Essayez celui-ci si le texte est entouré ou sur plusieurs lignes à l'intérieur d'un div.
#box
{
display: table-cell;
vertical-align: middle;
}
Pour plus de référence, voir:
Essayez cette solution :
.EXTENDER {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.PADDER-CENTER {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>Construit en utilisant CSS + .
Vous pouvez utiliser l'extrait de code suivant comme référence. Cela fonctionne comme un charme pour moi:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it's my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>La sortie de l'extrait de code ci-dessus est la suivante:
Crédit du code source: Comment centrer le texte verticalement avec CSS? - Code Puran
Vous pouvez également utiliser les propriétés ci-dessous.
display: flex;
align-content: center;
justify-content : center;
Autrement:
Ne définissez pas l'attribut height de div, mais utilisez plutôt padding: pour obtenir l'effet. De la même manière que line-height, cela ne fonctionne que si vous avez une ligne de texte. Bien que de cette façon, si vous avez plus de contenu, le texte sera toujours centré, mais la div elle-même sera légèrement plus grande.
Donc au lieu d'aller avec:
div {
height: 120px;
line-height: 120px;
}
Tu peux dire:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
Ceci positionnera le padding supérieur de div sur 60px, et les _ gauche et droite padding à zéro, ce qui fera que div 120 pixels (plus la hauteur de votre police) en hauteur et en plaçant le texte verticalement centré dans le div.
Voici une autre option utilisant flexbox.
HTML
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
CSS
#container {
display: flex;
}
.child {
margin: auto;
}
Résultat
Je ne suis pas sûr que quiconque ait choisi la route writing-mode, mais je pense que cela résout le problème proprement et qu'il bénéficie d'un large soutien :
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>Cela fonctionnera bien sûr avec toutes les dimensions dont vous avez besoin (à part 100% du parent). Si vous décommentez les lignes frontalières, il sera utile de vous familiariser.
démo JSFiddle pour vous de tripoter.
support Caniuse : 85.22% + 6.26% = 91.48% (même Internet Explorer est dans!)
Encore meilleure idée pour cela. Vous pouvez faire comme ça aussi
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>Pour tous vos besoins en alignement vertical!
Déclarez ce Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Ensuite, incluez-le dans votre élément:
.element{
@include vertical-align();
}
La manière simple et polyvalente est (comme approche de Michielvoo en tant que table ):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
L'utilisation de cet attribut (ou d'une classe équivalente) sur une balise parent fonctionne même pour de nombreux enfants à aligner:
<parent ctrv> <ch1/> <ch2/> </parent>
Essayez la propriété de transformation:
#box {
height: 90px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} <div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Pour une seule ligne de texte (ou un seul caractère), vous pouvez utiliser cette technique:
Il peut être utilisé lorsque #box a une hauteur relative non fixée, en% .
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Voir une démonstration en direct sur JsBin (plus facile de modifier les CSS) ou JsFiddle (plus facile de modifier la hauteur du cadre de résultat).
Si vous souhaitez placer du texte interne en HTML, pas en CSS, vous devez envelopper le contenu du texte dans un élément supplémentaire inline et éditer #box::after pour le faire correspondre. (Et, bien sûr, la propriété content: devrait être supprimée.)
Par exemple, <div id="box"><span>TextContent</span></div>. Dans ce cas, #box::after doit être remplacé par #box span.
Pour la prise en charge d’Internet Explorer 8, vous devez remplacer :: par :.
Le code suivant mettra la div au milieu de l'écran, quelle que soit la taille de l'écran ou la taille div:
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
} <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>Voir plus de détails sur flexici .
Essayez le code suivant:
display: table-cell;
vertical-align: middle;
div {
height: 80%;
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
background: #4CAF50;
color: #fff;
font-size: 50px;
font-style: italic;
}<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>Je voudrais juste étendre la réponse de Michielvoo afin de libérer le besoin de hauteur de trait et de respirer de hauteur div. C'est fondamentalement juste une version simplifiée comme ceci:
div {
width: 250px;
/* height: 100px;
line-height: 100px; */
text-align: center;
border: 1px solid #123456;
background-color: #bbbbff;
padding: 10px;
margin: 10px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>All grown-ups were once children... but only few of them remember it</span>
</div>
<div>
<span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>NOTE: Une partie commentée de cssest nécessaire pour fixed-height de renfermant div.
J'ai vu les réponses précédentes, et elles ne fonctionneront que pour cette largeur d'écran (non réactif). Pour le responsive, vous devez utiliser flex.
Exemple:
div{ display:flex; align-item:center;}
Une solution très simple et très puissante pour aligner le centre verticalement:
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}<div class="outer-div">
<span class="inner">No data available</span>
</div>Vous pouvez utiliser la méthode de positionnement en CSS:
HTML:
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}
J'espère que vous utiliserez cette méthode aussi.
J'avais besoin d'une rangée d'éléphants cliquables, centrés verticalement, mais sans utiliser de tableau pour contourner certaines bizarreries d'Internet Explorer 9.
J'ai finalement trouvé le meilleur CSS (pour mes besoins) et c'est formidable avec Firefox, Chrome et Internet Explorer 11. Malheureusement, Internet Explorer 9 se moque toujours de moi ...
div {
border: 1px dotted blue;
display: inline;
line-height: 100px;
height: 100px;
}
span {
border: 1px solid red;
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.out {
border: 3px solid silver;
display: inline-block;
}<div class="out" onclick="alert(1)">
<div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
<div> <span>A lovely clickable option.</span> </div>
</div>
<div class="out" onclick="alert(2)">
<div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
<div> <span>Something charming to click on.</span> </div>
</div>Évidemment, vous n’avez pas besoin des frontières, mais elles peuvent vous aider à voir comment cela fonctionne.
Définissez-le dans button au lieu de div si vous ne vous souciez pas de son petit effet 3D visuel.
#box
{
height: 120px;
width: 300px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
}<button Id="box" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>Positionnement et étirement absolus
Comme pour la méthode ci-dessus, celle-ci commence par définir le positionnement sur les éléments parent et enfant comme relatif et absolu. De là les choses diffèrent.
Dans le code ci-dessous, j’ai encore utilisé cette méthode pour centrer l’enfant à la fois horizontalement et verticalement, bien que vous ne puissiez l’utiliser que pour le centrage vertical.
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
L’idée de cette méthode est d’essayer d’obtenir l’élément enfant de s’étendre sur les quatre arêtes en définissant les valeurs supérieure, inférieure, droite et gauche sur 0. Comme notre élément enfant est plus petit que nos éléments parents, il ne peut pas atteindre tous les éléments. quatre arêtes.
Si vous définissez auto comme marge des quatre côtés, les marges opposées sont égales et notre division enfant est affichée au centre de la division parent.
Malheureusement, ce qui précède ne fonctionnera pas dans Internet Explorer 7 et inférieur, et, comme dans le cas de la méthode précédente, le contenu de la div enfant peut devenir trop volumineux et être masqué.
C'est facile et très court:
.block {
display: table-row;
vertical-align: middle;
}
.tile {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 100px;
}<div class="body">
<span class="tile">
Hello middle world! :)
</span>
</div><!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
.element{position: relative;top: 50%;transform: translateY(-50%);}
Ajoutez ce petit code dans la propriété CSS de votre élément. C'est génial. Essayez le!
Les nouveaux navigateurs prennent désormais en charge la fonction CSS calc. Si vous ciblez ces navigateurs, vous pouvez envisager de faire quelque chose comme ceci:
<div style="position: relative; width: 400px; height: 400px; background-color: red">
<span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
Here are two lines that will be centered even if the parent div changes size.
</span>
</div>La clé consiste à utiliser style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" à l'intérieur d'un div parent absolu ou relativement positionné.
Vous pouvez essayer display:table-cell et vertical-align:middle partout où vous le souhaitez.
Exemple:
#box
{
display: table-cell;
vertical-align: middle;
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>.box {
width: 100%;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
.height {
line-height: 170px;
height: 170px;
}
.transform {
height: 170px;
position: relative;
}
.transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<h4>Using Height</h4>
<div class="box height">
Lorem ipsum dolor sit
</div>
<hr />
<h4>Using Transform</h4>
<div class="box transform">
<p>Lorem ipsum dolor sit</p>
</div>