CSS aligner verticalement les divs flottants

Question

J'ai une div (#wrapper) contenant 2 divs côte à côte.

J'aimerais que la colonne de droite soit alignée verticalement. J'ai essayé vertical-align:middle sur mon wrapper principal mais cela ne fonctionne pas. Cela me rend fou !

J'espère que quelqu'un pourra m'aider.

http://cssdesk.com/LWFhW

HTML :

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>  
  <div id="right-div">
    Here some text...
  </div>
</div>

CSS :

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

Answer 1

Vous n'avez pas de chance avec flottait éléments. Ils n'obéissent pas à vertical-align,

vous avez besoin d', display:inline-block à la place:

http://cssdesk.com/2VMg8

MÉFIEZ-vous

---

Soyez prudent avec l' display: inline-block; comme il interpretes l'espace blanc entre les éléments réels d'espace blanc. Il ne l'ignore comme display: block n'.

Je recommande ce:

Définir l' font-size de l'élément conteneur d' 0 (zéro) et réinitialiser l' font-size de votre valeur nécessaire dans les éléments comme

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

Voir une démonstration ici: http://codepen.io/HerrSerker/pen/mslay

---

CSS

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;  
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

Answer 2

Vous pouvez le faire assez facilement avec display table et display table-cell.

#wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

EDIT : En fait, j'ai fait un petit tour sur CSS Desk pour vous - http://cssdesk.com/RXghg

AUTRE ÉDITION : Utiliser Flexbox. Cela fonctionnera, mais c'est assez dépassé - http://www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

Answer 3

Je sais que cette question est ancienne, mais j'ai pensé qu'il serait utile d'afficher une solution au problème d'alignement vertical du flotteur.

En créant une enveloppe autour du contenu que vous souhaitez voir flotter, vous pouvez ensuite utiliser les pseudo-sélecteurs ::after ou ::before pour aligner verticalement votre contenu à l'intérieur de l'enveloppe. Vous pouvez ajuster la taille de ce contenu autant que vous le souhaitez sans que cela n'affecte l'alignement. Le seul problème est que l'enveloppe doit remplir 100 % de la hauteur de la page son contenant.

http://jsfiddle.net/jmdrury/J53SJ/

HTML

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

CSS

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Answer 4

Une solution possible consiste à faire du wrapper div flex avec des éléments alignés sur center comme spécifié par https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ .

Answer 5

Je fais de mon mieux pour éviter d'utiliser les flottants... mais - lorsque c'est nécessaire, je m'aligne verticalement sur le milieu en utilisant les lignes suivantes :

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