右にオーバーレイされたテキストを整列する

Question

異なるサイズの複数のイメージを中央に表示し、列に加えて、最初のイメージにオーバーレイドタイトルを付けるために、右側に整列させようとしています。ここに示すように、左側のタイトルを持つ

は、okです：

http://jsfiddle.net/c48em4ng/

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

しかし私は、きちんとすなわちの右側を持つ、画像の右側にテキストを揃えることができませんテキストは画像の右側に一致します。

left: autoをright: 0pxに置き換えた場合、タイトルは完全に右側になります。私はtext-align: rightとposition: absoluteを交換した場合 http://jsfiddle.net/c48em4ng/1/

は、水平方向の配置は結構ですが、タイトルは、画像の上に終わる： はhttp://jsfiddle.net/c48em4ng/2/

私は何ができる最高のright: 26.5%が、のようなものに手動でチューニングにありますもちろん、他の場所でも動作します。 http://jsfiddle.net/c48em4ng/3/

Answer 1

position: relativeを適用するテキストとイメージにはラッピング要素を使用する必要があります。次に、absoluteのテキストの配置は、このラッパーと関連しており（あなたのフィドルのようにbodyにはない）、希望の結果が得られます。http://jsfiddle.net/m4vno3oa/1/