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

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

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

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

2 个答案: