Pourquoi l'alignement vertical: le milieu ne fonctionne pas sur mon span ou div?

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

Voici ce que je fais actuellement 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/

Cela semble être le meilleur moyen - un certain temps s'est écoulé depuis mon message d'origine 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>

Utilisation de CSS3:

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

Css:

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

Remarque: cela peut ne pas fonctionner dans les anciens IE

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;

La définition de la hauteur de ligne à la même hauteur qu'elle contient div fonctionnera également

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

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

Dans le cas où vous ne pouvez pas compter sur Flexbox ... Placer .childau .parentcentre de. Fonctionne lorsque la taille des pixels est inconnue (en d'autres termes, toujours) et qu'il n'y a pas de problème avec IE9 + également.

.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>

Vous devez mettre vertical-align: middlel'élément intérieur, pas l'élément extérieur. Définissez la line-heightpropriété sur l'élément externe pour qu'elle corresponde à celle heightde l'élément externe. Ensuite, placez display: inline-blocket line-height: normalsur l'élément intérieur. En faisant cela, le texte sur l'élément interne se terminera par une hauteur de ligne normale. Fonctionne dans Chrome, Firefox, Safari et IE 8+

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

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

Violon

Je l'ai utilisé pour aligner tout au centre de la div enveloppe au cas où cela aiderait quelqu'un - je l'ai trouvé le 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>

Voici un exemple de deux façons de faire un alignement vertical. Je les utilise et ils fonctionnent plutôt bien. L'un utilise le positionnement absolu et l'autre utilise la flexbox .

Exemple d'alignement vertical

En utilisant flexbox, vous pouvez aligner un élément par lui-même à l'intérieur d'un autre élément avec display: flex;using align-self. Si vous devez l'aligner également horizontalement, vous pouvez utiliser align-itemset justify-contentdans 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 absolu, 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 positionné dans le coin supérieur gauche du conteneur.

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

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

voici un excellent article sur la façon d'aligner vical .. J'aime la façon de flotter.

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;
}

HTML

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

CSS

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

Nous avons défini le div parent pour qu'il s'affiche sous forme de tableau et le div enfant pour qu'il s'affiche sous forme de cellule de tableau. Nous pouvons ensuite utiliser l'alignement vertical sur le div enfant et définir sa valeur au milieu. Tout ce qui se trouve à l'intérieur de cette division enfant sera centré verticalement.

C'est simple. Ajoutez simplement display:table-cellvotre classe principale.

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

Découvrez ce jsfiddle !

Voici la dernière solution la plus simple - pas besoin de changer quoi que ce soit, ajoutez simplement trois lignes de règles CSS à votre conteneur de div où vous souhaitez vous centrer. J'adore 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 justify-contentvaleur peut être réglée sur les quelques options suivantes:

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

• center, qui alignera le div enfant sur le centre de son conteneur parent. C'est vraiment bien, car vous n'avez pas besoin d'ajouter un div supplémentaire pour envelopper tous les enfants pour mettre le wrapper dans un conteneur parent pour centrer les enfants. Pour cette raison, c'est le vrai centre vertical (dans le column flex-direction. De même, si vous changez le flow-directionen row, il deviendra centré horizontalement.

• flex-end, qui alignera la division enfant à l'endroit où le flux flexible se termine dans son conteneur parent. Dans ce cas, il se déplacera vers le bas.

• space-between, qui répartira tous les enfants du début du flux à 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 la moitié de l'espace au début et à la fin du flux.

Puisque vertical-alignfonctionne comme prévu sur un td, vous pouvez mettre une seule cellule tabledans le divpour 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 fonctionne pour autant que je sache. Il pourrait ne pas avoir les inconvénients des autres solutions de contournement.

Placez simplement le contenu dans un tableau avec une hauteur de 100% et définissez la hauteur du div principal

<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>

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

<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;
}

Il s'agit d'une approche moderne et elle utilise la fonctionnalité CSS Flexbox. Vous pouvez maintenant aligner verticalement le contenu dans votre conteneur parent en ajoutant simplement ces styles au .mainconteneur

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

Et vous êtes prêt à partir!