對齊重疊的文本在右邊

Question

我想顯示幾個不同大小的圖像集中在列中，除此之外，第一個圖像上有一個重疊標題，右對齊。

有左邊的標題是確定的，如下所示：

http://jsfiddle.net/c48em4ng/

p { 
    position: absolute; 
    top: 10%; 
    left: auto; 
} 

我卻無法正確對齊文本在圖像的右側，即具有右側該文字與圖像的右側相匹配。

如果我將left: auto替換爲right: 0px，則標題完全在右側。 http://jsfiddle.net/c48em4ng/1/

如果我更換position: absolute與text-align: right，水平對齊方式是好的，但圖像上方的標題結束： http://jsfiddle.net/c48em4ng/2/

我能做的最好是手動調成類似right: 26.5%，但當然它會在其他地方工作。 http://jsfiddle.net/c48em4ng/3/

Answer 1

您應該對應用的文本和圖像使用包裝元素position: relative。然後absolute文本的定位將涉及這個包裝（而不是body，就像你的小提琴），並帶來所需的結果，請參閱http://jsfiddle.net/m4vno3oa/1/