title: vertically aligning image on my site
body: <p>I have this code below.  it creates an image on the left and a description with a button on the right.  the two divs are side-by-side.  I can't figure out how to get the image to be vertically aligned within the surrounding "promo_box_wrapper".  </p>
  
  <pre><code>&lt;div class="promo_box no_border"&gt;
    &lt;div class="promo_box_wrapper promo_box_left"&gt;
      &lt;div class="photo_wrapper"&gt;
        &lt;img class="scale-with-grid" src="http://example.com/my.jpg" alt="living" width="1300" height="640"&gt;
      &lt;/div&gt;
      &lt;div class="desc_wrapper"&gt;
        &lt;h2&gt;Retirement Living&lt;/h2&gt;
        &lt;div class="desc"&gt;
          Retirement living is designed for senior adults who wish to maintain their independent lifestyles.
        &lt;/div&gt;
        &lt;a href="/services/retirement-living" class="button button_left button_theme button_js kill_the_icon"&gt;
        &lt;span class="button_icon"&gt;&lt;i class="icon-layout"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span class="button_label"&gt;Learn More&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the site is here:  <a href="http://www.seasonsmanagement.com/home-sample" rel="nofollow noreferrer">www.seasonsmanagement.com/home-sample</a></p>
  
  <p>I've tried adding <code>vertical-align:middle;</code> to these divs:</p>
  
  <pre><code>.promo_box_wrapper, .photo_wrapper, .desc_wrapper, .photo_wrapper img {
  vertical-align: middle;
  }
  </code></pre>
  
  <p>But it's laughing at me.  What am I missing?</p>