图像、标题和文本的对齐

Question

我试图对齐三个div的内容，使图像、标题和文本水平排列的开始(更改，因为我没有足够清楚)，并且图像被抵消，如图所示。我尝试过几种方法(包括将图像包装设置为固定大小)，但当我更改浏览器的大小时，它们似乎都没有很好的扩展--通常会导致文本和图像之间的差距变化过大，看起来很奇怪。

下面是我想要排列的设计：

​

​

我想要达到的目标是：

​

问题是，图像的每个大小都是根据其容器的宽度确定的。如果我设置了一个图像包装高度(蓝色边框)，为了对齐它下面的文本，当浏览器变得越来越小/或更大时，它会造成问题。例如，在浏览器大小较窄的情况下，相同的固定包装高度会发生这样的情况：

​

​

对于这种类型的布局/设计，是否有最佳实践或某些东西？

我创建了一个代码库来更清楚地显示问题，这里

​

.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%。这个比例正确，符合我的需要。

希望这能帮上忙。