div vertical align middle css

J’essaie de faire en sorte que mon texte soit aligné verticalement au milieu de la div de la div abc uniquement.

Je veux garder la hauteur à 50px et le texte à aligner verticalement au milieu du div.

Je n’ai pas encore trouvé de solution à ce problème, peut-être que je ne cherche pas les bonnes choses.

body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; height:500px; } #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; } 
 
asdfasdfafasdfasdf

Vous pouvez utiliser line-height: 50px; , vous n’aurez pas besoin d’ vertical-align: middle; Là.

Démo


Ce qui précède échouera si vous avez plusieurs lignes, alors dans ce cas, vous pouvez envelopper votre texte en utilisant span et use display: table-cell; et display: table; avec vertical-align: middle; , n’oubliez pas non plus d’utiliser la width: 100%; pour #abc

Démo

 #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; display: table; width: 100%; } #abc span { vertical-align:middle; display: table-cell; } 

Une autre solution que je peux imaginer ici consiste à utiliser la propriété transform avec translateY()Y signifie évidemment Y Axis. C’est assez simple … Tout ce que vous avez à faire est de placer la position des éléments à la position absolute et plus tard à 50% rapport au top et de convertir à partir de son axe avec un négatif de -50%

 div { height: 100px; width: 100px; background-color: tomato; position: relative; } p { position: absolute; top: 50%; transform: translateY(-50%); } 

Démo

Notez que cela ne sera pas pris en charge sur les navigateurs plus anciens, par exemple IE8, mais vous pouvez créer IE9 et d’autres versions plus anciennes de Chrome et de Firefox en utilisant respectivement les préfixes -ms, -moz et -webkit .

Pour plus d’informations sur la transform , vous pouvez vous référer ici .

C’est simple: donnez au parent ce div:

 display: table; 

et donnez à l’enfant des div (s) ceci:

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

C’est tout!

 .parent{ display: table; } .child{ display: table-cell; vertical-align: middle; padding-left: 20px; } 
 
Test
Test Test Test
Test Test Test
Test Test Test
Test Test Test
Test Test Test

Ancienne question, mais de nos jours CSS3 rend l’alignement vertical très simple !

Ajoutez simplement à #abc le css suivant:

 display:flex; align-items:center; 

Démo simple

Démo de la question originale mise à jour

Exemple simple:

 .vertical-align-content { background-color:#f18c16; height:150px; display:flex; align-items:center; /* Uncomment next line to get horizontal align also */ /* justify-content:center; */ } 
 
Hodor!

J’ai trouvé cette solution par Sebastian Ekström. C’est rapide, sale et fonctionne très bien. Même si vous ne connaissez pas la taille du parent:

 .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Lisez l’article complet ici .

Vous pouvez utiliser une hauteur de ligne aussi grande que la hauteur du div. Mais pour moi, la meilleure solution est la suivante -> position:relative; top:50%; transform:translate(0,50%); position:relative; top:50%; transform:translate(0,50%);

Que diriez-vous d’append une line-height ?

 #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; line-height: 45px; } 

Violon, hauteur de ligne

Ou padding sur #abc . Ceci est le résultat avec un remplissage

Mettre à jour

Ajoutez dans votre css:

 #abc img{ vertical-align: middle; } 

Le résultat J’espère que c’est ce que vous cherchez.

Essaye ça:

 .main_div{ display: table; width: 100%; } .cells { display: table-cell; vertical-align: middle; } 

Une autre méthode pour centrer une div:

 
Content here
#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50px; height: 100px; margin: auto; }

Ce code concerne l’alignement vertical central et horizontal du centre:

 .parent-class-name { position: relative; } .className { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); }