html - 在右侧对齐重叠的文本

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/

score 1 · Accepted Answer

您应该为您应用的文本和图像使用包装元素position: relative。然后absolute文本的定位将与此包装器相关（而不是与body您的小提琴一样）并带来所需的结果，请参阅http://jsfiddle.net/m4vno3oa/1/

1 回答 1