如何在图像旁边垂直对齐 DIV？

Question

I have the following html code:

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

and the following 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%; }

I need the 'details' div to be vertically aligned to middle relatively to the image. How can I accomplish that?

Thanks !!!

Answer 1

Use 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

try this

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

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

the idea is to float left both the image and details. by doing so two elements will have the same height. and then you can make the detail div padding top and bottom some space.

Answer 3

basically what I would do is:If you can specify a fixed height (corresponding to your image height) for your outer container(#personalInfo div)..do it. then I will set this #personalInfo position to relative: After that I will set your #details div position to absolute so that I can shift it to 50% from top and i would set margin-top:-yy where yy is half the height of the #details to offset the item up:

give a look here