Centrado 2 Divs dentro de otro verticalmente

Question

Tengo 2 divs que quiero centrar verticalmente dentro de otro div. Por el momento tengo:

http://jsfiddle.net/5vpA3/1/

Ahora entiendo lo que está pasando aquí, pero quiero que el div izquierda a estar alineado verticalmente dentro de ese contenedor y el derecho div mismo. Pero se están alineando verticalmente como un par y no individualmente. He intentado varias cosas pero parece que no puedo hacer que funcione.

Answer 1

Live Demo

• Retire float: left de #left y #right.

• su lugar, utilice display: inline-block:

  #left, #right { 
      display: inline-block; 
      vertical-align: middle; 
  } 
  

• Debido a la utilización de display: inline-block, usted tiene que tratar con the whitespace issue. Elegí eliminar los espacios en blanco en el HTML entre </div> y <div id="right">. See here por lo que sucede si no haces eso. Eliminar el espacio en blanco realmente es la solución más fácil, pero there are other ways.

Answer 2

como esta?

Demostración: http://jsfiddle.net/5vpA3/25/

#container 
{ 
    background-color: #FFFF00; 
} 
#left 
{ 
    height: 150px; 
    color: #FFFFFF; 
    background-color: #0000FF; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 
#right 
{ 
    height: 80px; 
    color: #FFFFFF; 
    background-color: #FF0000; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
}