我有一个图片库，我希望图片在页面上水平居中。我希望将图像元数据、标题、艺术家姓名等放在该图像的右侧。
首先，我尝试在包含 div 内并排浮动图像和 meta_data，但随后图像不再根据页面居中，因为包含 div 的整体宽度用于居中。另外，我不知道包含 div 的宽度应该是什么，因为我不知道图像的宽度，它是动态的。我不想在 div 上设置硬编码宽度，因为我想让图像根据设计缩小。
然后我尝试使用display:table display:row display:cell，其中图像在左侧单元格中，元数据在右侧单元格中。桌子会伸展到图像的宽度，这很棒。然后，我将position:relative元数据表单元格放在右侧，然后positive:absolute将包含元数据的 div 放在右侧。这在大多数浏览器中效果很好，但在 FF 中无法正确显示。我发现table-cell并position:relative没有很好地混合......即使position:relative嵌套在不同的元素中。
因此，我尝试将图像和元数据元素都放在包含 div 的display:inline-block; positive:relative. 这再次围绕我的内容延伸，而没有像常规display:block那样一直延伸到最大宽度，这很棒。我再次将元数据绝对定位在右侧。它在 chrome、ff 和 safari 中看起来很棒……但是，现在我的动态图像缩放中断了。我调整了图像的大小，max-width:100%以便它可以针对移动设备缩小。但是在 FF 中这不起作用。我想图像无法读取内联块上的宽度是多少？我尝试在图像周围放置另一个 div，display:block但这仍然不起作用。
什么是使图像居中的好方法，但将一段文本定位在其右侧，但max-width:100%在缩放时仍然有图像响应？
到目前为止我所拥有的示例：