¿Cómo alinear verticalmente un DIV al lado de una imagen?

Question

Tengo el siguiente código html:

<div id="personalInfo"> 
    <img class="photo" alt="" src="...." /> 

    <div id="details"> 
     <p> 
     <label class="label">Name:</label> 
     <label class="detailsLabel"></label> 
     </p> 

     <p> 
     <label class="label">Date of birth:</label> 
     <label class="detailsLabel"></label> 
     </p> 

     <p> 
     <label class="label">Employee id:</label> 
     <label class="detailsLabel"></label> 
     </p> 

     <p> 
     <label class="label">Status:</label> 
     <label class="detailsLabel"></label> 
     </p> 
    </div> 
</div> 

y el siguiente CSS:

#personalInfo  
{ 
    width: 35%; 
    float: left; 
    clear: left; 
    margin-top: 5%; 
    margin-left: 2%; 
    font-size: 1.3em; 
} 
#details { margin-left: 5%; } 
.photo { 
    vertical-align: middle; 
    width: 150px; 
    height: 150px; 
    float: left; 
    margin-left: 3%; 
    border: 1px solid #d1c7ac; } 
.label { margin-top: 2%; margin-left: 5%; font-weight: bold; } 
.detailsLabel { margin-top: 5%; margin-left: 0.5%; } 

necesito div los 'detalles' para ser alineado verticalmente a media relativamente a la imagen. ¿Cómo puedo lograr eso?

Gracias !!!

Answer 1

uso display: inline-block.

#details { 
    display: inline-block; 
    vertical-align:middle; 
    border:solid black 1px; 
    width: 300px; 
} 
.photo { 
    display: inline-block; 
    vertical-align:middle; 
    width: 300px; 
    height: 300px; 
    border: 1px solid #d1c7ac; 
} 

Answer 2

probar este ejemplo de trabajo

#personalInfo{ 
    float: left; 
    margin-top: 5%; 
    margin-left: 2%; 
    font-size: 1.3em; 
} 
img{float:left;border:1px solid #333} 
#details{float:left;padding:10px 0 10px 0} 

: http://jsfiddle.net/bingjie2680/DSmKu/

la idea es flotar a la izquierda tanto la imagen y los detalles. al hacerlo, dos elementos tendrán la misma altura. y luego puedes hacer que el espacio div de arriba y abajo ocupe un espacio.

Answer 3

básicamente lo que yo haría es: Si puede especificar una altura fija (correspondiente a la altura de su imagen) para su contenedor exterior (#personalInfo div) ... ¡hágalo! luego estableceré esta posición #personalInfo en relativa. Después de eso, estableceré la posición #details div en absoluta para poder cambiarla al 50% desde arriba y estableceré margen superior: -yy donde yy es la mitad de la altura de los # detalles para compensar el elemento:

dan un aspecto here