我正在尝试居中并在列中显示多个不同大小的图像,除此之外,在第一个图像上有一个重叠的标题,并在右侧对齐。
标题在左边是可以的,如下所示:
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/
最佳答案
您应该为应用position: relative
的文本和图像使用环绕元素。然后文本的 absolute
定位将与此包装器相关(而不是与 body
相关,就像在您的 fiddle 中一样)并带来所需的结果,请参阅 http://jsfiddle.net/m4vno3oa/1/
关于html - 右对齐重叠文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46409882/