Как вертикально выровнять DIV рядом с изображением?

У меня есть следующий код 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>

и следующий 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%; }

Мне нужно, чтобы div "details" был вертикально выровнен относительно среднего относительно изображения. Как я могу это сделать?

Спасибо!!!

Ответ 1

Используйте 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; 
}

Ответ 2

попробуйте это

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

Идея состоит в том, чтобы поплыть слева и от изображения и деталей. при этом два элемента будут иметь одинаковую высоту. и затем вы можете сделать детали div padding сверху и снизу некоторым пространством.

Ответ 3

в основном то, что я сделал бы: Если вы можете указать фиксированную высоту (соответствующую высоте вашего изображения) для вашего внешнего контейнера (#personalInfo div).. сделайте это! то я поставлю эту позицию #personalInfo в относительную. После этого я установил абсолютную позицию div #details, чтобы перенести ее на 50% сверху, и я бы установил margin-top: -yy, где yy - половина высоты #details для смещения элемента вверх:

посмотрите здесь