alignement vertical au milieu dans <div>


126

Je veux garder la hauteur de #abc divat 50pxet le texte pour l'aligner verticalement au milieu du div.

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;
}
<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Réponses:


183

Vous pouvez utiliser line-height: 50px;, vous n'en aurez pas besoin vertical-align: middle;.

Démo


Ce qui précède échouera si vous avez plusieurs lignes, donc dans ce cas, vous pouvez envelopper votre texte en utilisant spanet que utiliser display: table-cell;et display: table;avec vertical-align: middle;, n'oubliez pas non plus d'utiliser 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 à laquelle je peux penser ici est d'utiliser la transformpropriété avec translateY()Ysignifie évidemment l'axe Y. C'est assez simple ... Tout ce que vous avez à faire est de définir la position des éléments absoluteet la position ultérieure à 50%partir de topet de traduire de son axe avec négatif-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 de navigateur plus anciennes de Chrome et Firefox en utilisant respectivement les préfixes -ms, -mozet -webkit.

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


J'ai eu besoin de connaître cette solution simple à hauteur de ligne toute ma vie professionnelle et je ne l'ai appris que maintenant. Merci, monsieur Alien.
Nathan Beach

94

C'est simple: donnez à la div parent ceci:

display: table;

et donnez au (x) enfant (s) ceci:

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

C'est tout!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>


6
c'est mauvais car cela utilise la table comme un hack, cela peut fonctionner dans la plupart des cas, mais lorsque vous voulez changer la largeur de la `` table '', cela ne fonctionnera pas correctement (ce que j'ai le problème maintenant avec cette solution )
Kevin Simple

Je n'avais pas besoin d'ajouter le display:table;au parent pour le faire fonctionner.
VincentPerrin.com

C'est peut-être un hack ... mais ça marche, et la plupart des autres solutions ne fonctionnent que dans des cas spécifiques et ne sont souvent pas utilisables dans notre cas.
Jerry

Avantage de cette solution: fonctionne avec tout type de contenu (pas seulement pour le texte, et pas seulement une seule ligne ...)
Jerry

77

Ancienne question mais de nos jours CSS3 rend l'alignement vertical vraiment simple !

Ajoutez simplement au #abcCSS suivant:

display:flex;
align-items:center;

Démo simple

Démonstration de la question d'origine 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; */
}
<div class="vertical-align-content">
  Hodor!
</div>


3
Je suggérerais aussi: display: grid; align-items: centre; Cela fonctionne mieux lorsque vous avez plus d'un objet à aligner verticalement ensemble
Leonardo Daga

Quels navigateurs prennent en charge CSS3 ?
Kiquenet

@Kiquenet, 92% du marché mondial caniuse.com/#search=align-items
Daniel Kucal

Perfekt! Simple et facile .. il suffit d'ajouter au conteneur
Ujjwal Singh

47

J'ai trouvé cette solution par Sebastian Ekström. C'est rapide, sale et fonctionne vraiment 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 .


3
Cela peut rendre les choses floues car le résultat des transformations peut conduire à ce que les choses soient positionnées à des emplacements de demi-pixels.
Kevin Wheeler

1
Il y a une mise à jour sur le message ciblant ce problème. Sur le parent transform-style: preserve-3d;:!
Andry

8

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


4

Que diriez-vous d'ajouter 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 paddingsur #abc. C'est le résultat avec un rembourrage

Mettre à jour

Ajoutez dans votre css:

#abc img{
   vertical-align: middle;
}

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


ne fonctionne pas tout à fait comme je le souhaite, lorsque vous modifiez la hauteur ou la hauteur de ligne, quelque chose ne va pas. déjà obtenu une réponse, merci quand même
Sickest

2

Essaye ça:

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

Une autre méthode pour centrer un div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

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

2

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="text-align-center"> Align center</div>


Expliquez-le s'il vous plaît!
Szabolcs Páll

1

Utilisez la propriété CSS translateY pour centrer verticalement votre texte dans son conteneur

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

Et puis appliquez-le à votre DIV contenant

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Ajustez le pourcentage de translation en fonction de vos besoins. J'espère que cela t'aides


1

Ce code est pour l'alignement central vertical et horizontal sans spécifier de hauteur fixe:

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.