图像、标题和文本的对齐答案

【问题标题】：alignment of images, headings and text图像、标题和文本的对齐
【发布时间】：2018-09-04 13:40:18
【问题描述】：

我正在尝试对齐三个 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>

编辑：为了清楚起见，我正在尝试使标题和文本水平对齐。我稍后会添加第二张图片

【问题讨论】：

如果您使用负边距顶部而不是平移变换有帮助吗？（即margin-top: -5rem;）。翻译转换仍然会让元素占用 DOM 中的空间，就好像它没有偏移一样
.card-image { 宽度：100%;高度：150px；垂直对齐：中间； }
zgood：这可能值得我这样做，纯粹是因为 dom 中的空间，但我不确定这是否有助于文本排列。会看看。谢谢
stalinrajindian：不幸的是，它并没有保留图像纵横比

标签： html css

【解决方案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 确定上边距。

【讨论】：

嘿，感谢您的回复，但这不是我所追求的 - 通过将文本推到底部，文本仍然不会与我所看到的对齐，因为它然后取决于文本的数量而不是
你想让文本居中吗？
如果可能的话，我希望每个标题（和文本）在每张卡片上的相同位置开始（这样它们水平排列）。
谢谢，看起来不错。我不确定我是否完全理解那里发生的事情（尤其是为什么使包装器高度为 1px 以对齐图像和文本的原因）。当/如果你有时间，你介意再解释一下吗？我希望能够编辑/修改设计（特别是让图片的顶部对齐，而不是中心），但如果不了解到底发生了什么，我对此没有信心
1px 是为了让图像容器卡在顶部。它看起来好像img 以顶部边框为中心，但实际上它以1px 高度元素为中心。

【解决方案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;
}

还有你已经居中的“卡片”

【讨论】：

嘿 MR0，谢谢，我曾考虑过对图像使用绝对定位，但这肯定会导致某些屏幕尺寸下图像和文本之间的距离出现问题吗？如果我知道图片的高度就好了，这样我就可以设置文字的相对位置了，可惜我没有
嗯，我不知道是否存在其他解决方案，因为在浏览器中，每个“卡片”都必须了解其他内容。解决方案，可能会更改 html 布局，或使用旧的表格行方案：/

【解决方案3】：

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

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

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

希望这对某人有所帮助。

【讨论】：