I am trying to display several images of different sizes centered and in column, and in addition to that, to have an overlaid title on the first image, aligned on the right.
Having the title on the left is ok, as shown here:
p {
position: absolute;
top: 10%;
left: auto;
}
I cannot however properly align the text on the right side of the image, i.e. having the right side of the text matching the right side of the image.
If I replace the left: auto with right: 0px, the title is completely on the right.
http://jsfiddle.net/c48em4ng/1/
If I replace the position: absolute with text-align: right, the horizontal alignment is fine, but the title ends up above the image:
http://jsfiddle.net/c48em4ng/2/
The best I could do is to manually tune to something like right: 26.5% but of course it will work at all elsewhere.
http://jsfiddle.net/c48em4ng/3/
You should use a wrapping element for text and image to which you apply position: relative. Then the absolute positioning of the text will be in relation to this wrapper (and not to the body, like in your fiddle) and bring the desired result, see http://jsfiddle.net/m4vno3oa/1/