在我的网站上垂直对齐图像

Question

>我在下面有这段代码。 它在左侧创建一个图像，在右侧创建一个带有按钮的描述。 两个div 并排。 我不知道如何让图像在周围的"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>

网站在这里： www.seasonsmanagement.com/home-sample

我尝试向这些div 添加vertical-align:middle;：

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

但它在嘲笑我。 我错过了什么？

Answer 1

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

Answer 2

从.photo_wrapper和desc_wrapper中删除float: left，使它们内联并添加verticle-align。所以你的html的最终css如下：

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