Below is the code I am currently working with. It displays an image on the left and a description with a button on the right, side-by-side within the "promo_box_wrapper" container. However, I'm struggling to vertically align the image within its surrounding div.
<div class="promo_box no_border">
<div class="promo_box_wrapper promo_box_left">
<div class="photo_wrapper">
<img class="scale-with-grid" src="http://example.com/my.jpg" alt="living" width="1300" height="640">
</div>
<div class="desc_wrapper">
<h2>Retirement Living</h2>
<div class="desc">
Retirement living is designed for senior adults who wish to maintain their independent lifestyles.
</div>
<a href="/services/retirement-living" class="button button_left button_theme button_js kill_the_icon">
<span class="button_icon"><i class="icon-layout"></i></span>
<span class="button_label">Learn More</span>
</a>
</div>
</div>
</div>
To view the site, click here: www.seasonsmanagement.com/home-sample
I have attempted to add vertical-align:middle; to the following classes:
.promo_box_wrapper, .photo_wrapper, .desc_wrapper, .photo_wrapper img {
vertical-align: middle;
}
However, I can't seem to get it to work as desired. Can you please advise me on what might be missing?