vertically aligning image on my site

Question

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

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

the site is here: www.seasonsmanagement.com/home-sample

I've tried adding vertical-align:middle; to these divs:

.promo_box_wrapper, .photo_wrapper, .desc_wrapper, .photo_wrapper img {
vertical-align: middle;
}

But it's laughing at me. What am I missing?

You can see this: https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Cuong Vu, Apr 10 '18 at 16:56

score 2 · Answer 1 · answered Apr 10 '18 at 17:32

2

.promo_box_wrapper{
  display: -webkit-flex; 
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

answered Apr 10 '18 at 17:32

Deepinder Singh

729
10
18

score 0 · Answer 2 · answered Apr 10 '18 at 17:10

From .photo_wrapper and desc_wrapper remove float: left, make them inline and add verticle-align. So the final css for your html is below:

.promo_box_wrapper .photo_wrapper {
    width: 36%;
    text-align: left;
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
}
.promo_box_wrapper .desc_wrapper {
    width: 56%;
    margin: 0 2% 0 6%;
    padding-top: 10px;
    vertical-align: middle;
    display: inline-block;
}

vertically aligning image on my site

2 Answers2