右对齐重叠文本

Question

我正在尝试居中并在列中显示多个不同大小的图像，除此之外，在第一个图像上有一个重叠的标题，并在右侧对齐。

标题在左边就可以了，如下所示：

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，就像在您的 fiddle 中）并带来所需的结果，请参阅 http://jsfiddle.net/m4vno3oa/1/

Align overlaid text on the right