我有一個圖像庫，我希望圖像在頁面上水平居中。我希望將圖像元數據，標題，藝術家名等放置在該圖像的右側。如何將各種寬度的圖像居中，同時讓每個圖像都有一個文本塊右移？
首先，我試圖將圖像和meta_data並排放在一個包含div中，但隨後圖像不再按照頁面居中，因爲包含div寬度的整體用於居中。此外，我不知道包含div的寬度應該是因爲我不知道圖像的寬度，它是動態的。我不想在div上設置硬編碼寬度，因爲我想讓圖像根據設計縮小。
然後我嘗試使用display:table display:row display:cell，其中圖像位於左側單元格，元數據位於右側單元格中。桌子會延伸到圖像的寬度，這非常棒。然後，我將position:relative放在元數據表格單元格上，然後將positive:absolute包含元數據的div放在右邊。這在大多數瀏覽器中運行良好，但在FF中無法正確顯示。我發現table-cell和position:relative混合不好......即使position:relative嵌套在不同的元素中。
因此，然後我試圖把圖像和元數據元素都放在一個包含display:inline-block; positive:relative的div中。再次，這擴展了我的內容，而不是一直延伸到最大寬度，這是一個常規的display:block，這很棒。我再次將元數據定位在右側。它在鉻，ff和safari中看起來很棒...但是，現在我的動態圖像縮放功能被打破了。我將尺寸設置爲max-width:100%，以便它可以縮小移動設備的尺寸。但在FF中這是行不通的。我認爲圖像無法讀取內聯塊的寬度？我試圖在display:block的圖片周圍放置另一個div，但仍然無法使用。
什麼是定位圖像的好方法，但是有一段文字定位在其右側，但縮放時圖像仍會響應max-width:100%？
什麼，我至今Example：