Html 图像、标题和文本的对齐

我正在尝试对齐三个div的内容，以便图像、标题和文本的开头（由于我不够清楚而更改）水平排列，并且图像偏移，如图所示。我尝试过几种方法（包括将图像包装设置为固定大小），但当我更改浏览器的大小时，这些方法似乎都不能很好地伸缩-通常会导致文本和图像之间的间隙大小变化过大，看起来很奇怪

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

我正在努力实现的目标：

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

这种布局/设计是否有最佳实践或其他方法

我已经创建了一个代码笔来更清楚地显示问题

.container{
位置：相对位置；
显示器：flex；
证明内容：周围的空间；
宽度：100%；
顶部：15雷姆；
}
.卡片{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：32%；
边框：1px纯红；
}
.卡图像包装器{
边框：1px纯蓝色；
变换：translateY（-5rem）；
/*高度：20rem；可以使用此选项对齐文本，但缩放效果不佳*/
}
.1-1{
宽度：50%；
}
.2.2{
宽度：25%；
}
.3.3{
宽度：38%；
}
.卡片图像{
宽度：100%；
}

标题
我的同僚们都是精英。所有人都必须遵守劳动权利、不动产权利、权利、义务和义务以及类似的法律法规！埃文尼特·德比斯·萨默斯，
在阿特克·奎登（atque quidem）、杜洛里巴斯（doloribus）和临时选择权（Temporal optio nostrum vel-sit）的演讲中，我的演讲是这样的。这是我的梦想。
标题
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。根据格言，这是一种可供选择的劳动方式，它是一种最大的劳动方式和全方位的劳动方式。在康涅狄格州多洛雷斯市的大盲肠动物中，有一种必须的食物
什么样的比例大小必须包含在正常劳动水平的快速眼动中？这是一种罪过，因为它是一种普遍存在的行为，它包括死亡、死亡、死亡和死亡。
标题
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。我的痣复发阻碍了我的同侧性，不值得称赞的痣导致了全方位的错误，在实践中，没有人会因为微小的缺陷而失去尊严。
在这家公司里，是否有关于流动性的声明？

给你：

将

.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确定上边距。

我认为问题在于每个元素的对齐位置。在这种情况下，我想您希望通过这个中心对齐图像。要实现这一点，首先在中间设置图像的“定位点”：

.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
}

---

您已经居中的“卡片”

我已经将Blind Prophet的答案标记为正确的，因为它是有用的，我仍然在部分使用它，但至少在我实现它的方式中，它在调整大小时仍然存在类似的间距问题

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

伪元素绝对定位，顶部为20%，高度为80%。这个比例正确，适合我的需要

---

希望这对其他人有所帮助。

如果使用负边距顶部而不是平移变换，会有帮助吗？（即

页边距顶部：-5rem；

）。转换转换仍然会让元素在DOM中占据空间，就好像它没有偏移一样。card-image{width:100%；height:150px；vertical align:middle；}zgood：这可能值得我这么做，纯粹是因为DOM中的空间，但我不确定这是否有助于文本对齐。我来看看。谢谢Talinrajindian：很遗憾，这并没有保留图像的纵横比，谢谢你的回复，但这并不是我想要的-通过将文本推到底部，文本仍然不会从我能看到的位置对齐，因为这取决于文本的数量，而不是你想要文本居中的位置？我想要每个标题（和文字）如果可能的话，从每张卡片上的相同位置开始（使它们水平排列）。谢谢，看起来不错。不过，我不确定我是否完全理解那里发生了什么（特别是为什么使包装纸的高度为1px会使图像和文字对齐）.如果你有时间，请你再解释一下好吗？我希望能够编辑/修改设计（特别是让图片顶部对齐，而不是中间对齐），但如果不确切了解发生了什么事情，我就不相信这样做。1px会使图像容器卡在顶部。它使图像容器看起来好像

img

集中在顶部边框上，但实际上它集中在

1px

高度元素上。嘿，MR0，谢谢，我考虑过使用绝对位置如果我知道图像的高度，那就好了

.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;
}