title: How to vertically align a DIV next to an image?
body: <p>I have the following html code:</p>
  
  <pre><code>&lt;div id="personalInfo"&gt;
      &lt;img class="photo" alt="" src="...." /&gt;
  
      &lt;div id="details"&gt;
          &lt;p&gt;
          &lt;label class="label"&gt;Name:&lt;/label&gt;
          &lt;label class="detailsLabel"&gt;&lt;/label&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
          &lt;label class="label"&gt;Date of birth:&lt;/label&gt;
          &lt;label class="detailsLabel"&gt;&lt;/label&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
          &lt;label class="label"&gt;Employee id:&lt;/label&gt;
          &lt;label class="detailsLabel"&gt;&lt;/label&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
          &lt;label class="label"&gt;Status:&lt;/label&gt;
          &lt;label class="detailsLabel"&gt;&lt;/label&gt;
          &lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following css:</p>
  
  <pre><code>#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%; }
  </code></pre>
  
  <p>I need the 'details' div to be vertically aligned to middle relatively to the image.
  How can I accomplish that?</p>
  
  <p>Thanks !!!</p>