html - 图像、标题和文本的对齐

Question

我正在尝试对齐三个 div 的内容，以便图像、标题和文本的开头（因为我没有说清楚而改变）水平排列，并且图像如图所示偏移。我尝试了一些方法（包括将图像包装器设置为固定大小），但是当我更改浏览器的大小时，它们似乎都不能很好地缩放 - 通常导致文本和图像之间的间隙大小也发生变化很多，看起来很奇怪。

这是我要排列的设计：

我想要达到的目标：

问题是图像的每个大小都基于其容器的宽度。如果我设置了一个图像包装高度（蓝色边框），为了对齐它下面的文本，当浏览器变小和/或变大时会导致问题。例如，这就是在较小的浏览器尺寸下使用相同的固定包装器高度时会发生的情况：

这种类型的布局/设计是否有最佳实践或其他东西？

我创建了一个 codepen 来更清楚地显示问题，here

.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  top: 15rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
}

.card-image-wrapper {
  border: 1px solid blue;
  transform: translateY(-5rem);
  /*height: 20rem; can use this to align the text, but it doesn't scale well */
}

.wrapper-1 {
  width: 50%;
}

.wrapper-2 {
  width: 25%;
}

.wrapper-3 {
  width: 38%;
}

.card-image {
  width: 100%;
}

<div class="container">
  <div class="card">
    <div class="card-image-wrapper wrapper-1">
      <img src="https://cdn.inquisitr.com/wp-content/uploads/2016/08/Zombieland-Writers-Explain-How-They-Secured-Bill-Murray-For-That-Legendary-Cameo3-670x388.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque neque quisquam omnis incidunt laborum delectus deleniti, aliquid magnam, sit, autem eos perferendis saepe iure aut provident minus molestiae similique! Eveniet debitis accusamus,
      rerum illo dicta at atque quidem, ratione laboriosam doloribus, tempore optio nostrum vel sit. Fuga ipsam beatae doloremque.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-2">
      <img src="https://d919ce141ef35c47fc40-b9166a60eccf0f83d2d9c63fa65b9129.ssl.cf5.rackcdn.com/images/76053.max-620x600.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, ullam accusantium deserunt optio laborum nobis voluptates dolorem maxime ad omnis dolorum. Nisi esse maiores necessitatibus omnis voluptatem repudiandae obcaecati maxime dolores, cumque
      quod pariatur magni sunt incidunt rem voluptatum commodi laborum odio vel? Quisquam culpa a praesentium eligendi aut totam commodi ab eius quis, eos, animi, amet minus debitis unde.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-3">
      <img src="https://d2npu017ljjude.cloudfront.net/images/regular-43/w735/92783-11.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id molestias distinctio recusandae impedit iste ipsum, mollitia non laudantium incidunt saepe omnis error natus exercitationem alias quas in, nobis sed aliquam minima adipisci amet magnam.
      Perferendis nostrum, dicta consequatur odit aliquid placeat sequi porro fuga enim?</div>
  </div>
</div>

编辑：为了清楚起见，我试图使标题和文本水平排列。我会尽快添加第二张图片

Answer 1

给你：https ://codepen.io/anon/pen/jvwVor

.card-image-wrapper位于页面顶部的位置，高度基本为0。将其他所有内容放在底部。img然后将inside居中.card-image-wrapper。

 display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  min-height: 25rem;
  border: 1px solid red;
}

.card-image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
  height: 1px;
}

.card-heading {
  margin-top: 15rem;
}

这假设你的照片不是高得离谱。如果您希望所有 3 个对齐，则必须确保图片短于某个高度。否则，您必须通过 JavaScript 确定上边距。

Answer 2

我认为问题在于对齐每个元素的位置。在这种情况下，我想您想按自己的中心对齐图像。为了实现这一点，您首先将图像的“锚点”设置在中间：

.card-image-wrapper{
  border: 1px solid blue;
  transform: translateY(-50%) translateX(-50%); // <-- change
  position: absolute; // <-- new
  top: 0; // <-- new
  left: 50%; // <-- new
  width: 100px; // <-- new
  height: 100px; // <-- new
}

如您所见，图像包装器设置为绝对位置。设置相对于卡片的位置：

.card{
  position: relative; // <-- new
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
  padding-top: 100px; // <-- new
}

还添加一个填充顶部作为图像的可用空间，并设置图像约束

.card-image-wrapper img {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

而你已经居中的“卡片”

Answer 3

我已将 theblindprophet 的答案标记为正确，因为它很有帮助，并且我仍在部分使用它，但至少我实现它的方式在调整大小时仍然会遇到类似的间距问题。

我还使用的解决方案是背景和/或边框的伪元素。这给人的印象是内容是偏移的，同时在调整大小时允许元素的流动保持不变。

伪元素是绝对定位的，顶部为 20%，高度为 80%。这可以正确扩展并符合我的需要。

希望这可以帮助某人。