web-dev-qa-db-fra.com

div vertical aligner le milieu css

J'essaie d'aligner verticalement mon texte au centre de la div de l'abc div uniquement.

Je veux garder la hauteur à 50px et le texte à aligner verticalement au milieu de la 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;
}
<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

htmlcssvertical-alignment
101
Sickest

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

Démo

La procédure ci-dessus échouera si vous avez plusieurs lignes. Dans ce cas, vous pouvez envelopper votre texte avec span, puis 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 consiste à utiliser la propriété transform avec translateY() où Y représente évidemment l’axe Y. C'est assez simple ... Tout ce que vous avez à faire est de définir la position des éléments sur absolute et la position ultérieure 50% à partir de la top et la traduction de cet axe avec un -50% négatif.

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 par les anciens navigateurs, 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, -moz et -webkit.

Pour plus d'informations sur transform, vous pouvez consulter ici .

152
Mr. Alien

C'est simple: donnez au parent div ceci:

display: table;

et donnez à l'enfant 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;
}
<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>

85
Burak Çanga

Une vieille question mais de nos joursCSS3 rend vraiment l'alignement vertical simple!

Il suffit d’ajouter à #abc le css suivant:

display:flex;
align-items:center;

Simple Demo

Question originale démo 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>

48
Jaqen H'ghar

J'ai trouvé cette solution de 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%);
}

Lire l'article complet ici .

38
Scott

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

6
Andris

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 trait

Ou padding sur #abc. C'est le résultat avec padding

Mettre à jour

Ajoutez dans votre css:

#abc img{
   vertical-align: middle;
}

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

3
Aldi Unanto

Essaye ça:

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

Une autre méthode pour centrer une 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;
}
1
Friend
 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>
0
Fouzia Khan

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

<style>
.centertext{

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

}
</style>

Et ensuite l'appliquer à votre DIV contenant

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

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

0
Hondaman900