1

问题如下面的链接所示 - 覆盖图像的文本仅在多行时正确居中......缩放窗口时问题仍然存在。

这就是问题

的HTML：

<body>
    <div id="navbar">
        ...
    </div> 
    <div class="picFrame" id="pf1"></div>
    <div class="picFrame" id="pf2"></div>
    <div class="picFrame" id="pf3"></div>
</body>

我用js添加图片，依次附加到每个picFrame。js：

$("#pf1").append('<div class="cont"><img src="pics/' + a[i][0] + '"><span>' + a[i][1] + ' - ' + a[i][2] + '</span></div>');

相关的CSS：

span {
    display: block;
    color: white;
    bottom: 25px;
    position: absolute;
    margin: 5px;
}
.cont {
    position: relative;
    text-align: center;
}
.picFrame {
    display: inline-block;
    width: 32%;
}
img {
    margin: 0 0 4% 0;
    border-radius: 4%;
    width: 100%;
}

所以问题是 - 为什么单行文本不居中，我该如何解决这个问题？

提前谢谢你，J。

4

1 回答 1

4

如果没有一个工作示例继续，它可能会添加这个：

span {width: 100%}

这在我重建的代码中有效，但它可能与您的实际情况无关。

于 2013-05-20T10:20:50.357 回答