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