html - 如何使各种宽度的图像居中，同时使每个图像的文本 block 都齐平？

Question

我有一个图片库，我希望图片在页面上水平居中。我想要将图像元数据、标题、艺术家姓名等放置在该图像的右侧。

首先，我尝试在包含的 div 中并排 float 图像和 meta_data，但随后图像不再根据页面居中，因为整个包含的 div 宽度用于居中。另外，我不知道包含的 div 的宽度应该是因为我不知道图像的宽度，它是动态的。我不想在 div 上设置硬编码宽度，因为我想让图像根据设计缩小。

然后我尝试使用 display:table display:row display:cell，其中图像在左侧单元格中，元数据在右侧单元格中。 table 会拉伸(stretch)到图像的宽度，这很棒。然后我将 position:relative 放在元数据表格单元格上，然后 positive:absolute 将包含元数据的 div 放在右边。这在大多数浏览器中运行良好，但在 FF 中显示不正确。我发现 table-cell 和 position:relative 不能很好地混合......即使 position:relative 嵌套在不同的元素。

然后我尝试将图像和元数据元素都放在一个包含 display:inline-block; 的 div 中。正:相对。这再次围绕我的内容展开，而没有一直延伸到最大宽度，就像常规 display:block 所做的那样，这很棒。我再次将元数据绝对放置在右侧。它在 chrome、ff 和 safari 中看起来很棒……但是，现在我的动态图像缩放中断了。我设置了图像 max-width:100% 的大小，以便它可以针对移动设备缩小。但在 FF 中，这是行不通的。我想图像无法读取内联 block 上的宽度是多少？我尝试在 display:block 图像周围放置另一个 div，但这仍然不起作用。

有什么好的方法可以让图像居中，让一段文本与它的右侧齐平，并且在缩放时图像仍然响应 max-width:100%？

Example到目前为止我所拥有的:

Answer 1

在 FF 中，向内容容器添加 width: 100% 允许它在较小的屏幕尺寸下 flex ；但是，这会导致它破裂，并且容器会在较大的屏幕尺寸下填满整个宽度。你在使用媒体查询吗？如果是这样，您可以在低于指定屏幕宽度时适当设置宽度。