图片，标题和文本的对齐

Question

我正在尝试对齐三个div的内容，以使图像，标题和文本的<开始>更改（因为我不够清楚），并且图像偏移，如图所示。我尝试了几种方法（包括将图像包装器设置为固定大小），但是当我更改浏览器的大小时，它们似乎都无法很好地缩放-通常会导致文本和图像之间的间隙大小也发生变化很多，看起来很奇怪。

这是我要排队的设计：

我要实现的目标：

问题在于图像的每种尺寸均基于其容器的宽度。如果设置图像包装器的高度（蓝色边框），以使其下方的文本对齐，则当浏览器变得越来越小时，它将引起问题。例如，在较小的浏览器尺寸下，相同的固定包装高度会发生以下情况：

这种布局/设计是否有最佳实践？

我创建了一个代码笔来更清楚地显示问题，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放在.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

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

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

伪元素是绝对放置的，其顶部为20％，高度为80％。这样可以正确缩放并满足我的需求。

希望这对某人有帮助。