时间戳

首页 > 解决方案 > 将 div 元素彼此居中定位

html - 将 div 元素彼此居中定位

问题描述

这是我的代码。请注意，图像的高度大于我想要的 div。我不想要的是另一个包含文本的 div 位于图像的底部。有没有什么办法解决这一问题？另外，我尝试了 margin-bottom 到 feature_details。

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
      <div class="feature_details">
        <h3 class="feature_name">Reviews that really matter</h3>
        <div class="feature_info">
          <p>
            Insolvers makes it easy to create rich, high-quality content using
            the inbuilt editor.
          </p>
          <p>
            Add images, gifs, and media - draft, experiment, and share with your
            peers before scheduling.
          </p>
        </div>
      </div>
      <div class="feature_display">
        <div class="feature_display__img">
          <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
        </div>
      </div>
    </div>

标签： htmlcss

解决方案

添加vertical-align: middle;到您的图像容器。

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
  <div class="feature_details">
    <h3 class="feature_name">Reviews that really matter</h3>
    <div class="feature_info">
      <p>
        Insolvers makes it easy to create rich, high-quality content using the inbuilt editor.
      </p>
      <p>
        Add images, gifs, and media - draft, experiment, and share with your peers before scheduling.
      </p>
    </div>
  </div>
  <div class="feature_display">
    <div class="feature_display__img">
      <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
    </div>
  </div>
</div>

推荐阅读