html - 右对齐重叠文本

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