Tengo un div (#wrapper) que contiene 2 divs uno al lado del otro.

Me gustaría que el div derecho esté alineado verticalmente. Intenté vertical-align: middle en mi envoltorio principal pero no funciona. ¡Me vuelve loco!

Espero que alguien pueda ayudar.

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

No tienes suerte con los elementos flotantes. No obedecen a la alineación vertical

necesitas, en display:inline-blockcambio:

http://cssdesk.com/2VMg8

TENER CUIDADO

Tenga cuidado display: inline-block;ya que interpreta el espacio en blanco entre los elementos como un espacio en blanco real. No lo ignora como lo display: blockhace.

Recomiendo esto:

Establezca el font-sizedel elemento contenedor en 0(cero) y restablezca el font-sizevalor necesario en los elementos como tal

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

Vea una demostración aquí: 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;
}
  

Puede hacer esto con bastante facilidad con la tabla de visualización y la celda de la tabla de visualización.

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

EDITAR: En realidad, se metió rápidamente en CSS Desk para usted: http://cssdesk.com/RXghg

OTRA EDICIÓN: Use Flexbox. Esto funcionará, pero está bastante desactualizado: 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;
}

Me doy cuenta de que esta es una pregunta antigua, sin embargo, pensé que sería útil publicar una solución al problema de alineación vertical del flotador.

Al crear una envoltura alrededor del contenido que desea flotar, puede usar los pseudo selectores :: after o :: before para alinear verticalmente su contenido dentro de la envoltura. Puede ajustar el tamaño de ese contenido todo lo que desee sin que afecte a la alineación. El único inconveniente es que la envoltura debe llenar el 100% de la altura de su contenedor.

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

Una posible solución es crear un contenedor div flexcon elementos alineados centersegún lo especificado por https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ .

Hago todo lo posible para evitar el uso de flotadores ... pero, cuando es necesario, me alineo verticalmente con el medio usando las siguientes líneas:

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

El único inconveniente de mis modificaciones es que tienes una altura div establecida ... No sé si eso es un problema para ti o no.

http://cssdesk.com/kyPhC