web-dev-qa-db-fra.com

CSS vertical-align: le milieu ne fonctionne pas

J'essaie de centrer verticalement un élément span ou div dans un autre élément div. Cependant, quand je mets vertical-align: middle, rien ne se passe. J'ai essayé de changer les propriétés display des deux éléments et rien ne semble fonctionner.

C'est ce que je suis en train de faire sur ma page web:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}
<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Voici un jsfiddle de l'implémentation montrant que cela ne fonctionne pas: http://jsfiddle.net/gZXWC/

htmlcss
188
Brad

Cela semble être le meilleur moyen - un certain temps s'est écoulé depuis mon post initial et c'est ce qui devrait être fait maintenant: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Vous pouvez également utiliser les éléments suivants:

Utiliser CSS3:

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}
179
Charles Addis

Essayez ceci, fonctionne très bien pour moi:

/* 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;
127
Mahendra Liya

Utiliser CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
}

Remarque: cela pourrait ne pas fonctionner dans les anciens IE

95
user1782556

Définir la hauteur de ligne à la même hauteur que celle qui contient div fonctionnera également 

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}
30
Kevin Lynch

Si vous ne pouvez pas compter sur flexbox ... Placez .child dans le centre de .parent. Fonctionne lorsque la taille des pixels est inconnue (en d’autres termes, toujours) et qu’aucun problème avec IE9 + n’est également rencontré 

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}
<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

20
kornieff

Vous devriez mettre vertical-align: middle sur l'élément interne, not l'élément externe. Définissez la propriété line-height sur l'élément externe pour qu'elle corresponde à height de l'élément externe. Puis définissez display: inline-block et line-height: normal sur l'élément interne. En faisant cela, le texte sur l'élément interne sera enveloppé d'une hauteur de ligne normale. Fonctionne dans Chrome, Firefox, Safari et IE 8+

HTML

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

CSS

.main {
    height: 72px;
    line-height:72px;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

Fiddle

14
Tim Perkins

J'ai utilisé cela pour tout aligner au centre de la division wrapper au cas où cela aiderait quelqu'un - je l'ai trouvé plus simple:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}
<div class="wrapper">
  <div class="inner">
  </div>
</div>

7
Ruth Young

Ici, vous avez un exemple de deux façons de faire un alignement vertical. Je les utilise et ils fonctionnent plutôt bien. L’une utilise le positionnement absolu et l’autre avec flexbox .

Exemple d'alignement vertical

En utilisant flexbox, vous pouvez aligner un élément par lui-même dans un autre élément avec display: flex; à l'aide de align-self. Si vous devez également l'aligner horizontalement, vous pouvez utiliser align-items et justify-content dans le conteneur.

Si vous ne souhaitez pas utiliser flexbox, vous pouvez utiliser la propriété position. Si vous rendez le conteneur relatif et le contenu absolus, le contenu pourra se déplacer librement à l'intérieur du conteneur. Donc, si vous utilisez top: 0; et left: 0; dans le contenu, il sera placé dans le coin supérieur gauche du conteneur.

 Absolute positioning

Ensuite, pour l'aligner, il vous suffit de modifier les références supérieure et gauche à 50%. Cela positionnera le contenu dans le centre de conteneurs à partir du coin supérieur gauche du contenu.

 Align in the middle of the container

Vous devez donc corriger cela en traduisant le contenu de la moitié de sa taille vers la gauche et vers le haut.

 Absolute centered

7
Timbergus

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Nous définissons la div parent pour afficher sous forme de table et la div enfant pour afficher sous forme de cellule de tableau. Nous pouvons ensuite utiliser vertical-align sur la div enfant et définir sa valeur sur middle. Tout ce qui est à l'intérieur de cette div enfant sera centré verticalement.

5
Brijesh Patel

C'est simple. Ajoutez simplement display:table-cell dans votre classe principale.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Découvrez ce jsfiddle !

4
RizonBarns

voici un excellent article sur la façon d’aligner vetical ... J'aime le style float.

http://www.vanseodesign.com/css/vertical-centering/

Le HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Et le style correspondant:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}
4
Dory Zidon

Voici la dernière solution la plus simple - inutile de changer quoi que ce soit, ajoutez simplement trois lignes de règles CSS à votre conteneur de la div sur laquelle vous souhaitez centrer. J'aime Flex Box #LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}
<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Prime

la valeur justify-content peut être définie sur les options suivantes:

  • flex-start, qui alignera la div enfant sur l'endroit où commence le flux flexible dans son conteneur parent. Dans ce cas, il restera au top.

  • center, qui alignera la div enfant sur le centre de son conteneur parent. C’est vraiment bien, car il n’est pas nécessaire d’ajouter une div supplémentaire pour englober tous les enfants afin de placer l’emballage dans un conteneur parent afin de centrer les enfants. De ce fait, il s’agit du centre true vertical (dans la variable columnflex-direction. De même, si vous modifiez le flow-direction en row, il deviendra centré horizontalement.

  • flex-end, qui alignera la division enfant sur l'endroit où se termine le flux flexible dans son conteneur parent. Dans ce cas, il ira au fond.

  • space-between, qui propagera tous les enfants du début à la fin du flux. Si la démo, j'ai ajouté un autre div enfant, pour montrer qu'ils sont répartis.

  • space-around, similaire à space-between, mais avec half de l'espace au début et à la fin du flux.

3
Zhenyang Hua

Puisque vertical-align fonctionne comme prévu sur une td, vous pouvez insérer une seule variable table dans la div pour aligner son contenu.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Clunky, mais travaille autant que je peux dire. Il pourrait ne pas avoir les inconvénients des autres solutions de contournement.

2
Smig

Il suffit de placer le contenu dans une table avec une hauteur de 100% et de définir la hauteur de

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
1
Ramiro Mosquera

Pour centrer verticalement un élément span ou div dans une autre div, ajoutez une position relative à la div parent et une position absolue à la div enfant.Maintenant, la div enfant peut être positionnée n'importe où dans la div.Exemple inférieur au centre horizontalement et verticalement.

<div class="parent"> <div class="child">Vertically and horizontally centered child div</div> </div>

css:

.parent{position:relative;}
.child{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
0
Toki